概述

1. 服务于UI、UE、PM，快速迭代简单页面的在线工具。
2. 项目使用vue2.x、scss
3. 时间比较紧，只有十几天时间很多细节没有实现，搭建了框架，实现了核心逻辑以后有时间再更新吧。有什么需求 可以提供issues一起交流学习

功能

1. 用户行为栈 a: 撤销 b: 恢复 c: 删除 d: 保存 e: 预览

2. 拖拽组件生成布局 a: 遵循浏览器 & dom元素布局 b: 定位模式 & css

3. 组件可配置attrs a: props a: style b: class b: attrs a: style b: class

4. 组件emit事件支持

5. mock平台介入

6. 自定义组件 a: 仅限当前框架（vue） b: AST脱离框架

7. 模板页面

8. 异常处理 a: 断网 b: 意外关闭 c: ..

9. 组件层级结构 a: 所有当前组件向上遍历，找到所有的组件，以及组件名

10. 配置JSON化

/**
 * 渲染为自定义组件时，需要暴露on-change事件，将value值更新
 * 框架不管住内部如何更新value
 *   1. 只需要监听on-change事件，将值赋值给panel即可
 *   2. 只需要绑定value传递给组件即可
 */
    {
       "label": "标题", // 该配置label值
       "key": "title", // 解析为atts的key值
       "type": "Input", // 渲染的组件类型
       "attrs": { // 帮顶给组件的props
         "value": "输入框" // 默认值
       }
    }

难点

1. 导入mock数据
2. 导出组件源码 a: 带有目录结构 b: 单文件组件
3. 拖拽结果实时预览 a: 可操作性 b: 静态组件
4. 组件联动 a: 数据联动 b: 事件联动
5. 原生事件 a: 支持vue语法糖 b: AST解析编译

备注

1. 代码性能高于一切
2. 更少的dom层级嵌套
3. 更好的数据交互
4. 更短的代码块儿
5. 目前仅支持平级组件，组件软嵌套暂不支持（拖拽） a: 拖放的目标是laylout、layout进行嵌套