概述
从可视化的交互，去生成可读代码，是此次文章分享的核心需求。替代一部分初中级前端的业务能力，后端人员完全可以在界面中一顿操作最终生成可读代码，合并到工程中。
准备工作
- 需求设计
a: 用户(使用的用户)
b: 权限(导出、高阶组件)
c: 项目(类似于项目管理的概念)
d: 不局限于框架(vue、react、angular、...) - 基础组件库（公司自己的、element、社区的也可以）
拖拽的基石（打架的弹药啊） - 业务组件库
基于基础组件库拓展的强业务组件（有了子弹，那可不得做点大杀器） - 物料市场
由社区维护的自定义组件（人多力量大，总有人会提出意想不到的想法） - 界面设计
拖拽功能
- 行为分析
从左侧面板拖拽对应的组件，
在中间画布生成对应的组件，
在右侧面板生成该组件的对应配置。 - 思路
左侧面板渲染可拖拽的组件名称（componentArr）
右侧面板渲染激活组件的配置项（component[i]）
所以有全局变量actviePanel，dropPanel - 难点
componentArr的通用性和拓展性
actviePanel在鼠标移上的生成（position计算）
容器的概念，容器是可以无限嵌套，所以需要有一个事件栈，也可理解为dom栈.去处理用户当前处于什么栈，再去做逻辑处理 - 根据左侧拖入的组件配置，去配置列表中遍历对应的配置，赋值给右侧面板
代码生成
- 根据拖拽的行为，最终可以得到含有用户自定义配置的
panel数组， - 将该数组加工为自己个性化的
AST树结构，方便后续生成代码 - 拿到AST树结构之后，根据实现的代码转化类，调用对应的plugin（vue/react/angular）生成代码块
- 生成代码块的过程，其实就是遍历AST，拆分出不同的代码块，最终组合为你想要的语法，
- 生成代码时，变量名采用组件名+属性名+index，类似于
tableLoading_1
实现
- component-config
"Input": {
"AttributePanel": [
{
"isParent": true,
"label": "标题",
"key": "label",
"type": "Input",
"attrs": {
"value": "输入框"
}
},
{
"label": "占位提示",
"key": "placeholder",
"type": "Input",
"attrs": {
"value": "请输入文字"
}
},
{
"label": "禁用",
"key": "disabled",
"type": "BusinessSwitch",
"attrs": {
"value": false
}
}
],
"StylePanel": [],
"SeniorPanel": []
}
- componentArr
[ { "title": "文本输入框", "componentName": "Input", "icon": "", "smallIcon": "" },]
- 最终生成的
panel - 初步AST
延伸
- 接入mock平台，即可实现后端拖拽页面，mock平台测试接口，然后在界面中选择需要的接口，导出源码，直接接入到工程项目。
- 使用severless，云服务等形式。可以实现一站式部署
- 导出的文件可以涵盖目录结构，而不仅仅是单页面组件
- 对导出代码块做合理拆分组合，类似于公共组建的概念
- 目前仅实现了vue的导出，后续可以考虑支持react
- 因为时间原因，很多东西写的很粗糙。有时间了再补吧。
