This is the core logic code about a page editor that i made after DataV by vue. I am appreciated that you could give me some suggestions to improve it
The main editor part used the open source component vue-draggable-resize, i have picked up the sound code and modified part of it for own use. The editor platform and the component library have been separated to make this editor to be more extensible
vue-page-proeuce
│
│
└───components // component library
│
└───src
|
└───views
|
└───partComponent // editor platform
|
└───partComponentPreview // preview platform
...
props | type | required | descripition |
---|---|---|---|
styleFields | Object | no | The style class of the passed component, all properties are configurable within the component |
Fields | Object | yes | The data objects passed to the component and can be configured when the component library is extended |
npm run build pack editor platform code
npm run lib pack component library code
After packing the component library code, The generated js file should be placed in the platform code folder, If you need to upload the component library to the CDN separately, you could directly modify the index, HTML file reference file code
vue-page-proeuce
│
│
└───components 组件库
│
└───src
|
└───views
|
└───partComponent 编辑平台代码
|
└───partComponentPreview 编辑平台预览代码
...
组件库接收参数:
参数 | 类型 | 是否必传 | 描述 |
---|---|---|---|
styleFields | Object | 否 | 传递的组件的style的类,所有属性为组件内可配置的值 |
Fields | Object | 是 | 传递给组件的数据对象,拓展组件库时可自行配置组件对应的属性 |
npm run build 打包编辑平台代码
npm run lib 打包组件库代码
组件库代码打包后,应将生成的js文件放入平台代码文件夹内,若需要将组件库单独上传cdn,可直接修改index,html文件内引用文件的代码