為什麼會寫這個專案
最近在公司一直在做小程式的專案，在專案中就有一個使用元件構建小程式的功能，就類似以前的建站工具，這個功能是用比較傳統的方式寫的，使用JQ和JQ-UI的拖拽功能，相信大家也很熟悉這種組合方式，由於最近一直在學習vue，並且vue是資料驅動，就想用vue來寫一下這個功能。剛開始的準備寫的時候，想在網上找一個類似的demo研究研究，找了一圈發現，基本上什麼也找不到太多開源，之前好不容易找到一篇類似的文章，作者也要做類似的功能，但是沒有把程式碼開源出來，最後只能自己東平西湊的找資料，完成了專案的第一個測試版。
專案準備
1、vue-cli
2、vuedraggable
3、sortablejs
4、vuex
5、element-ui
vue-cli是vue官方推薦的腳手架還很適合有vue基礎的人使用。 在這個專案中由於用到了拖拽元素就為了方便就使用了vuedraggable，vuedraggable是基於sortablejs的封裝所以也要引入。由於元件中會存在大量的資料所以為了資料的統一管理，這裡就使用了vuex。element-ui這個我就不解釋了，為了好看點就引入。
安裝過程
1、安裝vue-cli並初始化一個vue專案
npm install --global vue-cli
vue init webpack vuetest
複製程式碼2、安裝專案所需要的包
npm install vuedraggable
npm install sortablejs
npm install --save vuex
npm install --save axios
npm install element-ui
複製程式碼3、執行專案
npm run dev
複製程式碼主要程式碼
完成上面這些操作就可以正式開始編寫程式碼了
1、main.js
在main.js檔案中基本上是引入了專案所需要的模組
2、dragapi.js
dragapi.js左側選單欄的資料配置
3、componentsData.js
每個元件初始化的資料配置
4、vuex.js
對資料的集中管理，每當元件的某個資料變化的時候都要同步到vuex
5、App.vue
在App.vue主要有三個自定義元件，draggable的拖拽元件，Sort元素排序元件，BaseEdit元素樣式編輯元件
draggable是vuedraggable的元件我就不多說了，下面我們來看一下Sort.vue檔案是怎麼樣的
6、Sort.vue
這個檔案其實是挺好理解的就是顯示元件檢視，這裡我們可以看到我們引入了Btn.vue、TextCp.vue這個兩個元件，當拖拽元件到Sort的時候回顯相應的元件檢視。在Sort.vue也要引入vuex因為我們需要更新檢視只要更新資料就可以了，這也是資料驅動的好處，不用再頻繁的操作DOM。
7、BaseEdit.vue
這個就是編輯器元件，可以回顯並編輯元件的資料。每個元件都會有一個自己單獨的編輯器元件，本來想把編輯元件放到放到元件本身去會更好，可能會在下次更新github會封裝在一起。
接下來我們看看每個元件具體是怎麼寫的
8、TextCp.vue
9、TextCpEdit.vue
10、DeleteCp.vue
這是對元件進行刪除操作的刪除元件
總結
說一下編寫元件的基本流程
1、dragapi.js新增一項元件
2、componentsData.js 新增元件建立時需要初始化的資料
3、寫xxx.vue元件（在Sort檢視中顯示）
4、寫xxxEdit.vue元件（元件的特有編輯器）
看一下最終的效果
由於這是本人第一次寫技術貼，有很多不足的地方，請大家諒解。如果有什麼地方寫得不明白可以到github下載原始碼研究一下，或者在下面評論或者提issues。
最後把原始碼附上 原始碼地址
https://github.com/dykily/dragWidget