项目主要结构分析

总览

从vue.config.js可知项目由两个page组成：

• public/index.html 负责表单可视化设计和生成表单代码。
• public/preview.html 负责运行生成的代码，展示效果。

表单可视化设计

1.备选组件都在config.js以json的形式声明

• src\components\generator\config.js

2.DraggableItem.vue使用render.js，将config.js的json转为element组件

• src\views\index\DraggableItem.vue
• src\components\render.js

3.RightPanel.vue将config.js中json配置展现出来，实现自定义的表单设置

• src\views\index\RightPanel.vue

生成表单代码

Home.vue中的generateCode函数将用户设计的表单渲染成vue代码。generateCode使用了html.js, css.js, js.js

• src\views\index\Home.vue
• src\components\generator\html.js
• src\components\generator\css.js
• src\components\generator\js.js

运行生成的代码

FormDrawer.vue中以iframe的形式嵌入preview.html，实现代码运行。preview.html的主要逻辑在preview\main.js

• src\views\index\FormDrawer.vue
• public\preview.html
• src\views\preview\main.js