yarn install

yarn run serve

yarn run build

yarn run test

yarn run lint

vuedraggable -- 拖拽组件

1.代码的思路讲解

1.在 APP.Vue 会去自动注册 './components/customPage/pageCmp' 下的组件

1.该目录下的 .vue 文件是用来声明可拖拽的组件
2.每个组件 都会在App.vue去触发自动注册组件的时候 触发他们的装饰器方法 CustPageComponent，
  其中装饰器规定参数对象，需求声明当前组件的一些基本信息  
3.'CustPageComponent'方法会将这些类的信息 依次存到 'elementComponentDict'、'mdlCmpDesignInfo'、 'smdlClsNameDesignInfoDict'
 3.1.'mdlCmpDesignInfo' 将会保存这些组件装饰器传进来的详情信息，这些详情信息将会展示页面布局左侧区域
 3.2.'elementComponentDict' 存储配置类名字为key，对应vue组件名为vale

1.左侧区域利用存储在 'mdlCmpDesignInfo' 中的组件信息进行数据展示

1.左侧区域和编辑区域用了组件 -- vuedraggable 进行了包裹，这里使用他们官方案例中的'clone' 案例有兴趣可以下载看看看官方案例
2.左侧区域信息都存储到了'mdlCmpDesignInfo'中，因此拖拽到中间区域时候触发'vuedraggable' 的change事件就可以拿到拖拽组件详细信息
3.中间区域'change' 事件到底做了什么? 我们从'mdlCmpDesignInfo'中获取当前被拖拽组件通过'CustPageComponent'存的详情信息，
在去实例化注对应组件声明的配置类，这些配置类被统一放在了'./model/customPage'文件下
    onChange(evt: any) {
        const added = evt.added
        const ele = added.element
        const eleObj: BasePageMdl = new ele.elementClass()
        this.custPage.children.push(eleObj)
    }
4.现在中间编辑区域将这些实例存起来，但是要在中间区域显示我们的组件我们利用VUE'is'特性去动态渲染组件，这时候就用到
 './model/customPage'下的文件 继承的'BasePageMdl',这个会去做两件事一件事，一件事是通过当前的配置类去找到他对应
 vue文件，也就通过'elementComponentDict'，存储的字典关系找到vue组件名字，然后在利用'is'进行渲染