基於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