基于webpack的vue语法糖实现思路

前言：

          最近2年一直在用vue做前端，发现vue写出来的代码可维护性比较高，但是同样一个功能代码行数比较多。

          就拿一个普通的表单来说，先写template，然后定义data，然后在写校验，然后写method，确实有点麻烦了。

          就想着有没有一种办法，做一种语法糖出来，保证vue原生代码支持的情况下把简单的功能简化。

          在开源中国看到百度的https://gitee.com/baidu/amis  amis项目，他使用json来画页面，代码非常的少，但是因为不支持自定义js扩展，所以做很多外部系统不是很好用。

          结合我做 fhs framework pagex模块的经验，提出了以下的思路。

小目标

比如我写一个表单页面，我可以这样写：

<template>
<pagex>
{
    id:"addForm",
    attr:{"class":"formClass",style:"with:100%"}
    config: {saveUrl: '/data/tank_owner/save',infoUrl:'/data/tank_owner/findById'},
    hook:{onSubmit:addFormOnSubmit},
    type:'form',
    child: [
        {
            title: '基础信息',
            type: 'group',
        },
        {
            title: '联系人',
            name: 'linkMan',
            type: 'input',
            required: true,
            dataType:'s-1-32'
        },
        {
            title: '联系地址',
            type: 'addressSelect',
            required: true,
            multiple : false,
        },
        {
            title:'备注',
            type:'textarea',
            name:'remark'
        },
        {
            title:'人员列表',
            data:'tableData',
            type:'table',
            columns: [
             {
                title: '姓名',
                name:'userName'
             },
             {
                title: '操作',
                template: `<template slot-scope="scope">
                <router-link
               v-auth="2"
               :to="{
                 path: '/dataCustomerManagerEdit',
                 query: { id: scope.row.userId}
               }"
             >
              编辑
             </router-link>
             </template>`,*/
             }
            ],
        },
   ]
}
</pagex>
</template>
<script>
export default {
  data() {
    return {
        tableData:[]
    }
  },
  async created() {
    await this._getTableData();
  },
  methods: {
    addFormOnSubmit(){
        let needSubForm = clone(this.addForm);
        if(!needSubForm.linkMan){
           needSubForm.linkMan = '我是默认值'
        }
        return needSubForm;
    },
    _getTableData(){
       this.tableData = [{userName:'zhangsan',"userid":1}];
    },
  }
}
</script>