vue编辑工具

先看效果，为一个可视化活动编辑器。

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。

JSON Schema 主要运用在如下几点：

首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。

每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。

如下图：

这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。

添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：

新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)

导出模块解释如下：

如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。

整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。

页面效果：

1.安装vue-monaco-editor

2.在使用页面import引用进来

3.注册为组件

4.在template中使用

5.在data中定义字段属性

6.在methods中定义方法

更多参数可参考：