Skip to content

Latest commit

 

History

History
204 lines (145 loc) · 8.74 KB

introduction.md

File metadata and controls

204 lines (145 loc) · 8.74 KB
Raw

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:

<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代码上：

      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 因为某种原因，没有正常完成初始化工作 ✔️