vue-component-creater-ui/introduction.md

# vue-component-creater

拖拽式的Vue组件生成平台

正式环境地址：https://lc.100tal.com/#/

## Project setup

```
yarn install
```

### Compiles and hot-reloads for development

```
yarn run serve
```

### Compiles and minifies for production

```
yarn run build
```

### Lints and fixes files

```
yarn run lint
```

### 优势：

- 搭建速度快。
- 效果可视化。
- 代码实时生成。
- 提供主流预制模板。
- 无需每次查找组件源代码，节省查找时间。
- 提供主流预制属性。
- 支持属性、模板自行扩展。

### 规划：

目前仅集成了部分市面上流行的组件库。组件库的集成希望可以通过开源的方式让大家自助添加。

添加的流程为：
在 src/rawComponents 目录下建立以组件名为名称的文件夹(例如:element)，并在该文件夹内提供一个 index.vue 文件，然后再将此文件引入到 src/components/RawComponents.vue 文件中。

\*.vue 文件建议以组件类型划分，例如 Botton 类的组件就可以都放在 button.vue 文件中，然后由 index.vue 文件引用。这样 Botton 的路径为:src/rawComponents/element/button.vue

当组件添加完毕后，需要给组件内的元素添加 lc-mark 的标志，这样这个组件才可以被**拖拽**。例如 element 的 Button:

```html
<el-button lc-mark>默认按钮</el-button>
```

当一切就就绪后，需要对所有的组件进行重新编译才可以正常使用，需执行 npm run compileComponent 命令。此命令会对 src/rawComponents 下所有的组件进行重新编译。如果有不希望编译的，请在 src/script/compile.js 中修改 ignore 属性。

> **需要注意的是:** 一类组件的 index.vue 文件最好不要编译，因为对这个文件内容的顺序是有要求的，比如**分割线**。而编译会使组件内元素的顺序重新排布(2020年12月28日已经将此问题修复)。

### TODO:

- 常用模板
- 预制常用属性
- 高亮当前属性编辑元素-跑马灯效果 -> 左下箭头高亮展示(2020 年 09 月 21 日效果不好，2020年12月28日已通过outline实现)✔️
- 尝试从 vue 运行时入手，获取更多原始信息(2020 年 09 月 21 日开始已经废弃，通过迂回方式获得更多信息)✔️
- 提供调试控制台，输出当前代码结构关系图，类似 vue-tools(2020 年 10 月 02 日 已实现基本的文本形式的结构输出，需要树形的可折叠结构)。✔️
- 将组件库、预制属性、属性解析规则挪至单独的项目中。
- 支持生成预制的 data,methods。✔️
- 我的常用：组件元素、整个组件。
- 接入自有的数据统计工具：神策。✔️

---

使用过程中发现的问题：

- 1.不支持删除某个元素。 ✔️
- 2.编辑 input 会造成高亮框混乱。 ✔️
- 3.没有下拉组件。✔️
- 4.删除外框内容子元素会一同被清空(两个 div 嵌套)。✔️
- 5.input 标签无法生成代码。 ✔️
- 6.提供一部分常用的组合组件。key:input ✔️
- 7.取消对 Html 元素的排序。需要更改 json2xml 的数据结构。Json 数据生成规则也需要变动。 ✔️
- 8.提供一些常见的模板。✔️
- 9.对复合组件还不支持 ✔️
- 10.针对某些组件预设样式。例如分页组件一定是在最下面且宽度为 100%的。
- 11.要对大型表单的搭建良好支持(例如课程管理页面的搭建https://wiki.zhiyinlou.com/pages/viewpage.action?pageId=60305227)。
- 12.预制更多常用的复合组件:{ key: value }。
- 13.更改父组件的属性，子组件被删除。✔️
- 14.对于:inline="true"的解析与生成需要完整支持，目前只能输出:inline。✔️

---

2020 年 09 月 16 日 目前的进展： 
 - 1.当下已支持通过更改 Vue-loader 实现在运行时拿到组件源代码。具体可以查看 CommitID:c66593ff87c07c60670e634f50f49e030f68b63b,该次提交已可以在控制台看到源代码输出。 
 - 2.重新定义源代码的获取方式: 通过将源代码解析为 Json 结构, 然后在编辑时通过对对象的操作实现代码的生成。所以这里涉及到对 html 的解析与生成。解析部分需要重写，生成逻辑之前已完成。

2020 年 09 月 17 日 目前进展：
嵌套结构基本稳定，可进行各种组合
输出代码已移除 ID 属性
TODO: 稳固属性编辑，输出代码值类型默认为字符串

2020 年 09 月 19 日
编辑的基本单位应当以最小组件，即不能再拆分的单位

2020 年 09 月 22 日
右上角上显示的统计：

- 1.累计访问次数(PV)。
- 2.生成的组件数(点击复制的统计)。
- 3.基础组件数(统计可拖拽的基础组件)。

2020 年 09 月 23 日
开始规划组件库，分设常用、组件厂商，下设组件类型
需要彻底修改 xml 解析库，保证原始顺序不出错，或者不要编译 index.vue

2020 年 10 月 16 日 1.支持拖入时位置确认，可以在前、在中、在后，目前只能追加最后。 2.支持已拖入的拖动调整。

2020年11月10日

- 需要在成熟的组件库下添加超链接，方便直接去该网站获得具体的属性说明。
- 完善iView组件库
- 集成Quasar组件库:http://www.quasarchs.com/
- 这个东西是主要针对什么人群，要解决什么痛点？

2020年11月17日

- 属性编辑增加按钮需要调整：因为最后一个属性是无法删除的。
- 元素的删除支持快捷键.
- Form表单增加内容为按钮的。
- 属性的输入要全部为字符串，不能为boolean。
- 无法在div内部的后面再追加。:center中
- 快速搜索输入框已有内容无法再次弹出
- 复制代码有问题，内容复制不上 ✔️

2020年12月04日
在编译form-base文件时，发现html与js都出了问题，问题发生在没有闭合标签的img以及下面这段JS代码上：
```js

      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;

```

**注意：** 在编辑组件库时，在script标签内部慎用大于小于号，会导致预编译阶段文本内容解析出错!

2021年01月08日10:27:25
在组件的css中不能使用scss的写法，否则编译Vue文件会不通过

2021年01月11日
今天支持重新命名文件中重复声明的变量，但**在文件中不能声明与prop相同的声明**

---

### 下一步重点工作

1.做大量实践，探索组件单元最合适的组成。✔️
2.hover 方式标记组件的区域范围。✔️
3.增加沟通群二维码。❎
4.增加UI库vuetifyjs：https://vuetifyjs.com/zh-Hans/
5.增加UI库kendo：https://www.telerik.com/kendo-vue-ui

---

### 核心原理介绍

我们知道，在编写后的 vue 代码在运行时会生成实际的 Html 代码，而组件生成平台的职责是将这些 Html 再转换为 vue 代码。

为了达到这样的目的，我们目前可行的思路是：将原始的代码文件进行预编译：对指定的 vue 组件分配一个随机 ID，并将这个 vue 文件的代码结构转换为 Json，以 map 的形式存储于 map.js 文件中。在运行时，将 map.js 文件加载进内存。当拖动某个被 lc-mark 标记的元素时，我们可获得这个元素相应的 ID，再通过这个 ID 到 map 中查找，于是获得了对应的原始代码结构。当拖入到某个元素中时，也通过相同的方式获得目标元素的原始代码，再将这两部分原始代码合并，并建立上下级关系。随后，通过新的代码结构，分析对应的@click、v-model、class 等我们所关注的属性，然后再将其生成对应的代码插入到将要生成的 Vue 组件中。如此，便形成了一个较为完整的 Vue 组件代码。

为了实现以上思路，有几项关键技术：

- 对 Vue 组件的解析与生成
- 上下级组件之间的数据结构关系
- html 元素与 Vue 代码之间吻合的对应关系
- Vue 代码的关键字解析，如@click
- 将代码转换为对象，将对象转换为代码
- 辅助线的定位与绘制

### 标准

本项目中所使用的标准色为：

- 蓝色：#435466;
- 绿色：#4dba87;
- 红色：#ff6159;

---

#### 不能接入到本平台的或者会出现不符合预期的元素

- el-dialog 无法直接显示在左侧组件栏中（2020年12月28日已通过一个按钮代表解决）
- el-input-number 拖拽时会抢占焦点，无法拖拽 ✔️
- el-select lc-mark标记的元素与实际运行时的元素不是同一个，无法找到其原始代码 ✔️
- el-switch 原因与el-select一致 ✔️ 通过检视图解决
- el-time-select 原因与el-select一致 ✔️
- el-image 因为某种原因，没有正常完成初始化工作 ✔️