Element UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。

简介

Form-Generator，是 JakHuang 在 Github 和码云上开源的表单设计与代码生成器，项目代码位于 https://github.com/JakHuang/form-generator，国内镜像位于 https://gitee.com/mrhj/form-generator。

Form-Generator 基于 Element UI 组件库的 Form 表单组件，开发了一个表单设计器，可以在设计器中，点选不同的输入组件构建表单，设计器则会自动生成对应的 Vue 代码，可以项目中使用。也可以把设计好的表单以 JSON 的格式导出，方便存储传输，使用时利用配套的解析器把 JSON 解析为设计好的表单即可使用。

安装

Form-Generator 需要 Node.js 10+，可以使用 NPM 进行安装：

npm i fms-form-generator

也可以自行下载项目代码进行构建：

git clone https://github.com/JakHuang/form-generator.git

然后安装依赖，使用 YARN

yarn

或 NPM 安装依赖

npm install

在本地运行表单设计器，运行

npm run dev

也可以构建之后进行部署

npm run build

Form-Generator 项目配套有 JSON 解析器，可以把 JSON 转化为真实的表单代码，可以使用 NPM 安装：

npm i form-gen-parser

另外，form-generator 还有配套的 VSCode 插件 Form Generator Plugin，使用 VSCode 的开发者们可以进行安装，帮助完成基本的表单代码搭建任务。

示例

Form-Generator 的主要界面是一个表单设计器：

可以看到，界面的左侧摆放了不同的输入组件，包括单行文本、计数器、下拉选择、日期范围和按钮等，基本满足了一般项目对于表单的所有需求。

界面中间是设计得到的表单，点击左侧的组件，便可在表单中添加。同时，表单中还提供了组件的复制和删除功能，可以自由进行编辑。

界面的右侧是组件属性和表单属性，可以对当前选中的组件的各项属性进行修改，如字段名、标题、标签宽度、默认值、尺寸等，进行所需组件的定制；也可以对表单属性进行修改，包括表单模型、校验模型、标签对齐等，实现表单层级的配置。

在完成了表单的设计之后，就可以点击界面上部的运行按钮，在这里我们可以选择生成类型，包括页面和弹窗两种，其中弹窗类型会把表单嵌入到对话框组件中。

完成类型选择后，我们就能得到生成的 Vue 代码，包括 Vue 模板、JS 和 CSS 代码：

可以看到，生成的代码可读性高，质量较好，可以直接引入到项目中进行使用。代码生成器也提供了一个美观的编辑器界面，可以直接对生成的代码进行编辑，并在右侧重新渲染修改的表单。

除了直接生成代码外，form-generator 还提供了把表单导出为 JSON 格式的功能，便于进行存储和传输。Form-generator 设计了一种具有特定格式的 JSON 格式用于 Element UI 表单的表示，可以在代码生成器中直接导出 JSON 文件，使用时再利用配套的 form-gen-parser 进行解析，重新生成表单代码。

表单的JSON表示以fields列表存储各表单项，各表单项一般包括：

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

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

总结

Form-Generator 作为 Element UI 的表单设计和代码生成器，简化了表单的设计和代码编写工作，使得表单的设计工作也能够“所见即所得”，在一些前端设计定制化要求不高的场景下，使用起来十分方便，既使得设计人员能够获得期望的表单设计，也减轻了代码开发人员的在前端设计方面的额外工作，一举两得。

Form-Generator 的实现需要对于 Vue 和 ElementUI 十分熟悉，尤其在表单的 JSON 表示的生成和解析方面的工作，颇具技巧；同时，该项目本身也是一个优秀的前端应用，感兴趣的开发者可以进行代码的阅读学习，参与开源贡献。