vue-lcd-engine

介绍

一款基于Vue的低代码引擎

软件架构

总体架构采用分层设计，通过组件层、模板层以及工程层进行拆分

对于vue-lcd-engine分别通过component、tooler、sider、setter、renderer、share进行模块拆分。其中，component模块是暴露给开发者进行协同开发的共建区块

安装教程

1. 下载

npm install vue-lcd-engine

2. 引入

import {
    Cascader,
    ComponentBox,
    ConfigItem,
    EditScreens,
    Feedback,
    Layout,
    Loading,
    Ruler,
    Size,
    SvgIcon,
    Thumbnail
} from 'vue-lcd-engine'

// 全局注册
[
   Cascader,
   ComponentBox,
   ConfigItem,
   EditScreens,
   Feedback,
   Layout,
   Loading,
   Ruler,
   Size,
   SvgIcon,
   Thumbnail 
].forEach(component => {
    Vue.component(component.name, component)
})

3. 使用

<template>
    <ComponentBox />
</template>

<script>
export default {
    data() {
        return {
            
        }
    }
}
</script>

<style></style>

组件说明

组件	名称	备注
Cascader	级联组件	import { Cascader } from 'vue-lcd-engine'
ComponentBox	容器组件	import { ComponentBox } from 'vue-lcd-engine'
ConfigItem	配置项组件	import { ConfigItem } from 'vue-lcd-engine'
EditScreens	编辑大屏组件	import { EditScreens } from 'vue-lcd-engine'
Feedback	反馈组件	import { Feedback } from 'vue-lcd-engine'
Layout	布局组件	import { Layout } from 'vue-lcd-engine'
Loading	加载组件	import { Loading } from 'vue-lcd-engine'
Ruler	刻度尺组件	import { Ruler } from 'vue-lcd-engine'
Size	尺寸组件	import { Size } from 'vue-lcd-engine'
SvgIcon	Svg图标组件	import { SvgIcon } from 'vue-lcd-engine'
Thumbnail	缩略图组件	import { Thumbnail } from 'vue-lcd-engine'

依赖说明

依赖	依赖包	备注
vue	vue 2.x	基于vue2的运行时进行构建
ant-design-vue	ant-design-vue 1.x	基于ant-design-vue的组件库进行构建，主题色修改等请参考ant-desgin-vue的官方文档

参考文献

• Vue 2.x官方文档
• Ant-Design-Vue 1.x官方文档

许可说明

MIT

Copyright (c) 2024-present we452366