今天给大家推荐一款超逼格的Vue可拖拽表单设计器组件FormGenerator。

form-generator 基于 Vue.js+ElementUI 高效表单设计组件，star高达1.7K+。

功能特点

• 可视化设计表单
• 一键生成原生的vue单页表单代码，保持100%拓展性
• 在线编辑器修改生成的代码，并实时预览
• 表单栅格化布局
• 支持表单校验
• 快速查阅组件的官方文档

vscode插件

在上文的设计器的基础上，封装了一个vscode插件。突破网页不能写入文件的限制。

请在vscode中搜索 jakHuang 或 Form Generator Plugin

安装使用

# 下载项目
git clone https://github.com/JakHuang/form-generator.git

# 进入目录
cd form-generator

# 安装依赖
npm install

# 本地开发
npm run dev

# 构建
npm run build

支持生成的代码直接运行在基于Element的vue项目中。也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

# 预览地址
https://mrhj.gitee.io/form-generator/

# 仓库地址
https://github.com/JakHuang/form-generator

ok，就分享到这里。希望对大家有所帮助，欢迎一起交流讨论！