小机灵鬼|Form-Generator - Element UI 表单设计与代码生成器( 二 ) ElementUI目前在中后台项目中应用广泛

在完成了表单的设计之后，就可以点击界面上部的运行按钮，在这里我们可以选择生成类型，包括页面和弹窗两种，其中弹窗类型会把表单嵌入到对话框组件中。
生成类型
完成类型选择后，我们就能得到生成的 Vue 代码，包括 Vue 模板、JS 和 CSS 代码：
Vue模板代码
JS代码
可以看到，生成的代码可读性高，质量较好，可以直接引入到项目中进行使用。代码生成器也提供了一个美观的编辑器界面，可以直接对生成的代码进行编辑，并在右侧重新渲染修改的表单。
除了直接生成代码外， form-generator 还提供了把表单导出为 JSON 格式的功能，便于进行存储和传输。 Form-generator 设计了一种具有特定格式的 JSON 格式用于 Element UI 表单的表示，可以在代码生成器中直接导出 JSON 文件，使用时再利用配套的 form-gen-parser 进行解析，重新生成表单代码。
form-generator的JSON表示
表单的JSON表示以fields列表存储各表单项，各表单项一般包括：

__config__：包括如标签、宽度等配置属性
__slot__：表单项的插槽
__vModel__：绑定的数据模型
style、disabled等原生属性

以此 JSON 文件，便可还原表单，得到生成的 Vue 代码。我们还可以以此为模板，添加变量，只需修改 JSON 数据就进行相似表单的自动化批量生成。

小机灵鬼|Form-Generator - Element UI 表单设计与代码生成器

表单的JSON表示
总结Form-Generator 作为 Element UI 的表单设计和代码生成器，简化了表单的设计和代码编写工作，使得表单的设计工作也能够“所见即所得” ，在一些前端设计定制化要求不高的场景下，使用起来十分方便，既使得设计人员能够获得期望的表单设计，也减轻了代码开发人员的在前端设计方面的额外工作，一举两得。
Form-Generator 的实现需要对于 Vue 和 ElementUI 十分熟悉，尤其在表单的 JSON 表示的生成和解析方面的工作，颇具技巧；同时，该项目本身也是一个优秀的前端应用，感兴趣的开发者可以进行代码的阅读学习，参与开源贡献。