【下载文档:  vue自动化表单实例分析.txt 】

---

vue自动化表单实例分析
背景
B端系统表单较多，且表单可能含有较多字段
字段较多的表单带来了大片HTML代码
在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护
技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发
目标
通过json配置快速生成表单的vue plugin。
设计目标
减少html 重复片段
表单字段组件可扩展
事件、联动通过eventbus 解耦
校验可扩展
表单布局可自定义
可视化配置
大概方案设计
使用
安装
npm install charlie-autoform charlie-autoform_component_lib
源码：http://charlielau.github.io/autoform/#/component/autoform
引入插件
import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';
Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
基本使用
demo.vue


最终效果
添加自定义组件或者组件目录
Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象
cHello.vue
// PATH:/components/autoform/cHello.vue


成果
目前应用再多个系统
定性： 维护成本降低、关注点分离
定量：表单开发效率提升50%
源码：http://github.com/CharlieLau/autoform