基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来,提供了常用的表单组件，可以直接使用，同时支持自定义增加组件以及提供api支持对表单做自定义操作，最新版本已添加对Antd的支持。
工具地址：
http://tools.xiaoyaoji.cn/form
GitHub地址：
https://github.com/GavinZhuLei/vue-form-making
表单设计器主界面
特性
设计器介绍
设计器页面分4个部分，组件库、工作台、配置栏、工具栏。
组件库
设计器的左方列出了所有支持的组件库，不用写任何代码即可直接使用，将组件拖动到工作台即可。如果已有的组件库不能满足需求，有自定义区域，可以在自定义区域中写入自己的代码，可以基于框架添加自己的组件到组件库中。
组件库
工作台
中间最大的区域则是工作台，显示的是组件信息，在工作台中可以方便的选中，拖动，复制，删除组件操作。当选中某个组件后，右边的配置栏会出现当前组件的的所有可配置属性。
配置栏
表单属性可配置整个表单的全局属性。
Element
Antd
组件属性
这是Grid布局，可以添加多列，主要点击添加列，设置列的长度即可。
多选框组，可以设置数据，布局，校验等
也可以设置数据源，动态获取多选框各列的值。
目前有两种动态数据的方式，一种是通过赋值变量的方式自动获取值，还有一种是自己实现方法函数获取值。
单行文本框
针对单行文本框，子表单等还可以设置数据的验证格式
更多组件的功能和用法可以参考网站文档，有很详细的说明，同时每个组件的各种属性都可以自定义，自行添加新的组件属性信息。
工具栏
工具栏中列出了几个常用的功能。
预览
点击预览按钮，可以实时预览表单
预览界面
点击获取数据可以的得到表单的所有数据
生成代码可以生成Vue组件，可以在Vue项目中引用，也可以直接生成html文件，在本地浏览器即可打开
生成JSON，可以将整个表单数据转换成JSON数据，点击导入JSON，即可还原回原来的表单。
例子中的表单数据文件地址：
http://cdn.form.xiaoyaoji.cn/FormJSON.txt
将JSON数据导入即可看到表单页面:
http://form.xiaoyaoji.cn示例
省市区数据联动示例：http://form.xiaoyaoji.cn/demo/#/ProvinceCityDistrict数据动态加载示例：http://form.xiaoyaoji.cn/demo/#/ProvinceCityDistrict更多示例更新中。。。
安装方法
CDN
目前可以通过 unpkg.com/form-making
获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
建议使用 CDN 引入 FormMaking 的用户在链接地址上锁定版本，以免将来 FormMaking 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com
通过 CDN 的方式我们可以很容易地使用 FormMaking 来加载表单设计页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
<div id="app">
<!-- 需要设置编辑区域高度 -->
<fm-making-form style="height: 500px;" preview generate-code generate-json>
</fm-making-form>
</div>
</body>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</html>
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack打包工具配合使用。
npm install form-making -S快速使用
1.引入 Element
项目中使用的是 element-ui 的组件库，在使用的时候需要引入 Element 包。
2.引入 FormMaking
完整引入
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)
部分引入
import {
GenerateForm,
MakingForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* 或写为
* Vue.use(GenerateForm)
* Vue.use(MakingForm)
*/
3.引入 ace.js
默认情况下没有引入ace.js，如果需要使用ace.js，需要自己引入。
至此，一个基于 Vue 和 Element 的表单设计器已经搭建完毕，现在就可以编写代码了。
Ant Design Vue 支持
最新版本表单生成器新增加了支持 Ant Design Vue 组件渲染，如果需要antd支持，需要安装antd并引入项目中。
1.安装 antd
2.引入 antd
3.引入 antd 表单生成器
4.使用 antd 表单
二次开发
表单设计器二次开发用于商业用途需要购买商业授权
获取代码
基础版本：
git clone https://github.com/GavinZhuLei/vue-form-making.git
高级版本需要授权获取运行项目
npm run serve运行启动的项目是引用设计器的官方网站代码，设计器源码在 src/components 下面
打包设计器
修改代码后，可以通过以下代码重新对设计器进行打包，打包过后放在 dist/ 目录下面，可在代码中直接引用
npm run build-bundle扩展表单属性
下面将介绍如何在设计器的基础上二次开发扩展自定义组件
1. 添加配置参数
src/components/Container.vue
<script>
export default {
// ...
data () {
return {
widgetForm: {
list: [],
config: {
labelWidth: 100,
labelPosition: 'top',
size: 'small'
// 在此处扩展表单的配置信息
},
},
}
}
}
</script>
2. 扩展设计器配置
src/components/FormConfig.vue 下添加对表单的配置，其中 props.data 是上面配置信息的 widgetForm.config
3. 添加渲染信息
配置完成后，最后就是渲染，在 src/components/GenerateForm.vue 下添加自己增加的配置即完成了对表单属性的扩展
扩展组件
1. 添加自定义组件信息
src/components/componentsConfig.js 下添加配置信息，目前包括 basicComponents advanceComponents layoutComponents 三个对象，分别对应设计器中基础字段、高级字段、布局字段，将配置信息添加到对应的字段下面:
{
type: 'input', // 组件类型，保持唯一
name: '单行文本', //组件展示名称
icon: 'icon-input', //组件展示icon, 如果需要自定义，请参考 如何自定义图标
options: { // 组件配置信息，根据自定义组件自己添加配置
defaultValue: '', // 该值表示组件的默认值
}
}
2. 引用组件
src/components/WidgetFormItem.vue 、 src/components/GenerateFormItem.vue 下分别引入自定义的组件:
import CustomComponent from '你的组件地址'
export default {
components: {
CustomComponent
}
}
3. 添加组件配置信息
src/components/WidgetConfig.vue 下根据自己要求添加配置信息, props.data 结构为上面的配置信息，至此，自定义扩展的组件就成功的引入到设计器中
自定义图标
项目使用的是阿里字体图标库 iconfont , 如果需要自定义图标配置，请将图标加入到自己的项目中，然后选择Font class，将代码下载到本地替换 src/iconfont 文件夹下的文件