基于vue的可视化编程

基于vue的可视化编程
网上找了几个开源的，下载下来一一试了下
https://github.com/jaweii/Vue-Layout
https://github.com/L-Chris/vue-design
https://github.com/fireyy/vue-page-designer
https://github.com/OXOYO/X-Page-Editor-Vue

Vue-Layout用了muse-ui
https://muse-ui.org/#/zh-CN/card
感觉还不错。

安装VSCode：https://code.visualstudio.com/，直接下载安装就可以，30几M还是比较小的。
Vue-Layout 流程学习：
编译流程：
参考文档：https://www.cnblogs.com/hl0203/p/7138600.html

npm run dev : node build/dev-server.js
-》package.json “dev”: “node build/dev-server.js”,
dev-server.js->
webpackConfig === webpack.dev.conf:这个
webpack.dev.conf.js-> webpack.base.conf
webpack.base.conf.js:这个文件entry app main.js 还定义了不同文件的loader等
这样基本上都load进工程里面了。

程序流程：
主要的三个文件：Index.html main.js引用muse-ui等并定义new Vue app.vue实现关在app
main.vue 中定义app挂载点:并定义主界面
最左边的已使用的插件离别
component-tree

中间preview

最右侧控件列表：

-》components.vue
mu-select-field Muse-ui；Mint-ui；iView-ui

我们来看mu-select-field 这个muse-ui组件：https://muse-ui.org/#/zh-CN/selectmoxing
组件用的版本是2：https://muse-ui.org/2.1.0/#/selectField

TextField.vue：文件就是定义了组件的template和export数据模型

当拖拽这个组件list的时候，相应components.vue 中dragStart函数，
e.dataTransfer.setData(‘info’, JSON.stringify(info))
参数放在了json串info中
之后在preview.vue文件中的drop函数中进行处理
preview.vue：
drop(e) { //松开拖放,e是容器元素，在这个函数处理
从e元素中得到参数，整理component，之后分成嵌套和非嵌套两种。
非嵌套的就直接：调用如下函数：
components.splice(index, 0, component)
this.fresh()-》函数执行this.mount()函数
mount()函数：进入mount.js
mount.js：
函数得到参数，并注册一个Vue