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