UI目前广泛应用于中后端项目，是非常流行的Vue组件框架。 表单元素作为最常用的用户输入组件，在设计和开发过程中几乎都会涉及到，而且它们往往是相似的。 能减少重复编码工作吗？ 是否可以通过点击几下鼠标来生成所需的表单，甚至无需编写代码？ Form-，这个基于UI框架Form元素的表单设计和代码生成器，可以解放你的双手。
框架
介绍
Form-是盒马云上开源的表单设计和代码生成器。 项目代码位于，国内镜像位于。
Form——基于UI组件库的Form表单组件，开发了表单设计器。 在设计器中，你可以点击不同的输入组件来构建表单，设计器会自动生成相应的Vue代码，可以在项目中使用。 您还可以将设计好的表单导出为JSON格式，方便存储和传输。 使用时，使用配套的解析器将JSON解析成设计的形式即可使用。
形式使用
安装
Form- 需要 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 buildForm-项目配备了JSON解析器，可以将JSON转换为真正的表单代码。 可以使用 NPM 安装：
npm i form-gen-parser此外，form-还有一个配套插件Form，开发者可以安装该插件来帮助完成基本的表单代码构建任务。
FMS 表单库
例子
Form-的主界面是表单设计器：
表单设计师
可以看到，界面左侧放置了不同的输入组件，包括单行文本、计数器、下拉选择、日期范围、按钮等，基本满足了一般项目对表单的所有需求。
表单设计器组件选择
界面中间是设计好的表格。 单击左侧的组件将它们添加到表单中。 同时，表单还提供了元件的复制和删除功能，可以自由编辑。
界面右侧是组件属性和表单属性。 您可以修改当前所选组件的各种属性，例如字段名称、标题、标签宽度、默认值、大小等，以定制所需的组件； 您还可以修改表格。 修改属性，包括表单模型、验证模型、标签对齐方式等，实现表单级配置。
组件属性编辑
表单设计完成后，您可以点击界面上方的运行按钮。 这里我们可以选择生成类型，包括页面和弹窗。 弹出窗口类型会将表单嵌入到对话框组件中。
生成类型
完成类型选择后，我们可以得到生成的Vue代码，包括Vue模板、JS和CSS代码：
Vue模板代码
JS代码
可以看到，生成的代码可读性高、质量好，可以直接引入到项目中使用。 代码生成器还提供了漂亮的编辑器界面，可以直接编辑生成的代码，并在右侧重新渲染修改后的表单。
form-除了直接生成代码之外，还提供了将表单导出为JSON格式的功能，方便存储和传输。 Form- 设计了一种具有特定格式的 JSON 格式，用于 UI 表单的表示。 JSON文件可以直接在代码生成器中导出，然后与配套的form-gen-一起使用来解析并重新生成表单代码。
表单的 JSON 表示形式 –
表单的 JSON 表示形式将每个表单项存储在列表中。 每个表单项一般包括：
使用此 JSON 文件，您可以恢复表单并获取生成的 Vue 代码。 我们还可以以此为模板，添加变量，只需修改 JSON 数据即可自动生成批量相似的表单。
表单的 JSON 表示形式
总结
Form-作为UI表单设计和代码生成器，它简化了表单设计和代码编写工作，使表单设计工作“所见即所得”。 可以用在一些前端设计定制要求不高的场景。 使用起来非常方便。 不仅可以让设计者获得想要的表单设计，也让代码开发者从前端设计的额外工作中解放出来，一石二鸟。
Form-的实现需要非常熟悉Vue，尤其是表单的JSON表示的生成和解析。 同时该项目本身也是一个优秀的前端应用，有兴趣的开发者可以阅读代码。 学习开源并为开源做出贡献。
好了，今天的主题就讲到这里吧，不管如何，能帮到你我就很开心了，如果您觉得这篇文章写得不错，欢迎点赞和分享给身边的朋友。
