vue-easy-from: 简称为esForm，是一个独立、不依赖第三方类库的vue表单组件；可通过一份json配置动态输出用户所需要的表单。
痛点
作为前端工程师，开发表单是家常便饭，是前端工程师的必修课之一。虽然vue这种数据驱动的开发框架给我们带来极大的方便，但是每次开发表单时都要重新编写差不多一样的html、js、css，这是极度重复无趣、没营养、费时费力的事件。
vue资源(vue-awesome)表单类库的现状
笔者前期在开发vue表单时，也曾经直接应用过vue资源的表单类库，虽是json配置，但在使用的过程中，也发现了不少问题。
- 基本上都是静态配置，无任何界面逻辑可言，（比如：A组件隐藏，B组件也需要隐藏等）；
- 类库运行依赖于类库本身定制化的组件，无法直接使用第三方组件；若想使用第三方组件，必须对第三方组件按当前的类库的组件规则进行封装，这样的组件只会是一次性使用，也无法在其它项目中重复利用，费时费力，极大增加用户的开发成本；
- 自定义组件需要全局声明，开发耦合度高，维护困难；
- 组件定制化，功能缺失，难以理解。
为什么选择esForm?
- 写法简单，只需要一个json配置，几乎无需html, css；
- 布局丰富，支持弹性布局和tabs布局；
- 无缝对接第三方组件，无需为框架定制化组件（可自由选择
element-ui、fish-ui、也可自定义vue组件），不增加用户的额外负担； - 表单功能齐全，包含标题、验证、事件、单位、帮助、描述、数组等，这些可以直接配置，也可以自定义，无限制；
- 逻辑控制灵活方便（支持es写法和函数写法），用户可以任意操作；
- 组件引用即插即用，无需要全局声明，耦合度超低。
如何使用esForm
安装与引入
// 安装
npm install --save vue-easy-form
import esForm from "vue-easy-form"; // 引入
Vue.use(esForm); // 插件安装
实例
在插件安装时已经注册一个"es-form"的表单组件，使用时只需要配置一个schema即可
<es-form :schema="formSchema" v-model="formValue"></es-form>
配置
formSchema中，每一项（如："name"）通常只需要配置3个属性，甚至可直接配置一个label（如："author"），简单方便。
data() {
return {
formValue: {
// 自动同步表单的值
},
formSchema: {
name: {
label: "广告名称", // label
component: "el-input", // 表单组件
value: "首页位置" // 初始值
},
author: "作者" // 简写：相当于配置了label,其它的使用默认值
}
};
}
表单效果
直接对接第三方组件，无需为框架定制化组件
具体的使用方法可查看官方的开发文档和实例：
开发文档：chengaohe45.github.io/vue-easy-fo…
github：github.com/chengaohe45…
