如何以拖拽方式生成Vue用户界面

<!--src/components/Designers/View/VueVisualDesigner.vue-->
<grid-layout ref="gridLayout" class="editorcanvas" :layout.sync="layout"
        :col-num="layoutOption.colNum" :row-height="layoutOption.rowHeight"
        :is-draggable="!preview" :is-resizable="!preview" @draGover.native="onDragOverGrid">
 <grid-item class="widgetPanel" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w"
    :h="item.h" :i="item.i" :key="item.i"
    @resize="onItemResize(item)" @container-resized="onItemResize(item)">
  <div v-if="!preview" class="widgetOverlay" @click="onSelectWidget(item)"></div>
  <!-- 动态widget -->
  <component :ref="item.i" :is="item.c" :style="makeWidgetStyle(item)"
     v-model="runState[item.m]" v-bind="item.p" v-on="item.a">
   {{ item.t }}
  </component>
 </grid-item>
</grid-layout>

//src/runtime/IVueVisual.ts
export interface IVueLayoutItem {
 
 n: string;
 
 t?: string;
 
 m?: string;
 
 p: object;
 
 b?: object;
 
 e?: object;
 
 a?: object;
 
 c?: any;
}


export interface IVueGridLayoutItem extends IVueLayoutItem {
 i: string;
 x: number;
 y: number;
 w: number;
 h: number;
}

export interface IVueState {
 Name: string;
 Type: string;
 
 Value: IVueEventAction;
}

export type EventAction = 'LoadData' | 'PostData' | 'RunScript';

export interface IVueEventAction {
 
 readonly Type: EventAction;
}

export interface IVueLoadDataAction extends IVueEventAction {
 
 State: string;
 Service: string; //后端服务: eg: sys.OrderService.listAll
 ServiceArgs: any[]; //eg: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value为表达式
}

//自定义Widget配置定义
{
 "Name": "Table",   //组件名称
 "Component": "sys.ExTable", //指向自定义视图模型或全局组件名称(eg: ElInput)
 "Icon": "fa fa-table",  //工具箱图标
 "Width": 12,    //默认网格宽度
 "Height": 6,    //默认网格高度
 "Props": [     //组件的props
 {
  "Name": "columns",
  "Type": "array",
  "Default": [],
  "Editor": "sys.ExTableColumnEditor" //指向自定义属性编辑器
 },
 {
  "Name": "rows",
  "Type": "array",
  "Default": []
 }
 ]
}