小机灵鬼|Form-Generator - Element UI 表单设计与代码生成器
Element UI 目前在中后台项目中应用广泛 ， 是十分流行的 Vue 组件框架 。 而表单元素 ， 作为最常用的用户输入组件 ， 在设计开发过程中几乎都要涉及 ， 且往往大同小异 。 能不能减少重复的代码编写工作呢？能不能甚至不写代码 ， 点几下鼠标就能生成想要的表单呢？Form-Generator ， 这个基于 Element UI 框架 Form 元素的表单设计与代码生成器 ， 就能解放你的双手 。
ElementUI框架
简介Form-Generator ， 是 JakHuang 在 github 和码云上开源的表单设计与代码生成器 ， 项目代码位于， 国内镜像位于。
【小机灵鬼|Form-Generator - Element UI 表单设计与代码生成器】Form-Generator 基于 Element UI 组件库的 Form 表单组件 ， 开发了一个表单设计器 ， 可以在设计器中 ， 点选不同的输入组件构建表单 ， 设计器则会自动生成对应的 Vue 代码 ， 可以项目中使用 。 也可以把设计好的表单以 JSON 的格式导出 ， 方便存储传输 ， 使用时利用配套的解析器把 JSON 解析为设计好的表单即可使用 。
form-generator使用
安装Form-Generator 需要 Node.js 10+ ， 可以使用 NPM 进行安装：
npm i fms-form-generator也可以自行下载项目代码进行构建：
git clone .git然后安装依赖 ， 使用 YARN
yarn或 NPM 安装依赖
npm install在本地运行表单设计器 ， 运行
npm run dev也可以构建之后进行部署
npm run buildForm-Generator 项目配套有 JSON 解析器 ， 可以把 JSON 转化为真实的表单代码 ， 可以使用 NPM 安装：
npm i form-gen-parser另外 ， form-generator 还有配套的 VSCode 插件 Form Generator Plugin ， 使用 VSCode 的开发者们可以进行安装 ， 帮助完成基本的表单代码搭建任务 。
fms-form-generator库
示例Form-Generator 的主要界面是一个表单设计器：
表单设计器
可以看到 ， 界面的左侧摆放了不同的输入组件 ， 包括单行文本、计数器、下拉选择、日期范围和按钮等 ， 基本满足了一般项目对于表单的所有需求 。
表单设计器的组件选择
界面中间是设计得到的表单 ， 点击左侧的组件 ， 便可在表单中添加 。 同时 ， 表单中还提供了组件的复制和删除功能 ， 可以自由进行编辑 。
界面的右侧是组件属性和表单属性 ， 可以对当前选中的组件的各项属性进行修改 ， 如字段名、标题、标签宽度、默认值、尺寸等 ， 进行所需组件的定制；也可以对表单属性进行修改 ， 包括表单模型、校验模型、标签对齐等 ， 实现表单层级的配置 。
组件属性编辑
推荐阅读
- 小机灵鬼|iQOO 3变形金刚限量版，手感一流，要的就是这个范儿
- 小机灵鬼|谷歌第二季度云计算收入攀升超43%
- 小机灵鬼|孩子学习的好帮手，喵喵机P2S错题打印机
- 小机灵鬼 谷歌第二季度云计算收入攀升超43%
- 小机灵鬼 孩子学习的好帮手，喵喵机P2S错题打印机
- 小机灵鬼|每日科普｜地质历史上的生物礁
- 小机灵鬼 亚马逊跨境电商让我重新相信努力，从“负债”到“富仔”
- 小机灵鬼|喵喵机P2S错题打印机，孩子学习的好帮手
- 小机灵鬼|全塔大空间，居然也超安静！航嘉Alpha α阿尔法工作站机箱
- 小机灵鬼|英特尔的困局，是美国科技霸权衰落的时代注脚