# vue-lcd-engine

**Repository Path**: VLeeDesignTheory/vue-lcd-engine

## Basic Information

- **Project Name**: vue-lcd-engine
- **Description**: 一款基于Vue的低代码引擎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-18
- **Last Updated**: 2024-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center"><a href="https://gitee.com/VLeeDesignTheory/vue-lcd-engine" target="_blank" rel="noopener noreferrer"><img width="200" src="assets/logo.png" alt="logo"></a></p>

# vue-lcd-engine

## 介绍

> 一款基于Vue的低代码引擎

## 软件架构

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

![总体架构](/assets/architecture.png)

对于[vue-lcd-engine](https://gitee.com/VLeeDesignTheory/vue-lcd-engine)分别通过`component`、`tooler`、`sider`、`setter`、`renderer`、`share`进行模块拆分。其中，`component`模块是暴露给开发者进行协同开发的共建区块

![技术选型](/assets/technology.png)


## 安装教程

1.  下载

```
npm install vue-lcd-engine
```

2.  引入

```js
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.  使用

```vue
<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](https://www.npmjs.com/package/vue)|基于vue2的运行时进行构建|
|ant-design-vue|[ant-design-vue 1.x](https://www.npmjs.com/package/ant-design-vue)|基于ant-design-vue的组件库进行构建，主题色修改等请参考ant-desgin-vue的官方文档|

## 参考文献

- [Vue 2.x官方文档](https://v2.cn.vuejs.org/)
- [Ant-Design-Vue 1.x官方文档](https://1x.antdv.com/docs/vue/introduce-cn/)

## 许可说明

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2024-present we452366