vue重構自動建站

爲何會寫這個項目

最近在公司一直在作小程序的項目，在項目中就有一個使用組件構建小程序的功能，就相似之前的建站工具，這個功能是用比較傳統的方式寫的，使用JQ和JQ-UI的拖拽功能，相信你們也很熟悉這種組合方式，因爲最近一直在學習vue，而且vue是數據驅動，就想用vue來寫一下這個功能。剛開始的準備寫的時候，想在網上找一個相似的demo研究研究，找了一圈發現，基本上什麼也找不到太多開源，以前好不容易找到一篇相似的文章，做者也要作相似的功能，可是沒有把代碼開源出來，最後只能本身東平西湊的找資料，完成了項目的第一個測試版。

項目準備

一、vue-cli

二、vuedraggable

三、sortablejs

四、vuex

五、element-ui

vue-cli是vue官方推薦的腳手架還很適合有vue基礎的人使用。 在這個項目中因爲用到了拖拽元素就爲了方便就使用了vuedraggable，vuedraggable是基於sortablejs的封裝因此也要引入。因爲組件中會存在大量的數據因此爲了數據的統一管理，這裏就使用了vuex。element-ui這個我就不解釋了，爲了好看點就引入。

安裝過程

一、安裝vue-cli並初始化一個vue項目

npm install --global vue-cli
vue init webpack vuetest
複製代碼

二、安裝項目所須要的包

npm install vuedraggable
npm install sortablejs
npm install --save vuex
npm install --save axios
npm install element-ui
複製代碼

三、運行項目

npm run dev
複製代碼

主要代碼

完成上面這些操做就能夠正式開始編寫代碼了

一、main.js

在main.js文件中基本上是引入了項目所須要的模塊

二、dragapi.js

dragapi.js左側菜單欄的數據配置

三、componentsData.js

每一個組件初始化的數據配置

四、vuex.js

對數據的集中管理，每當組件的某個數據變化的時候都要同步到vuex

五、App.vue

在App.vue主要有三個自定義組件，draggable的拖拽組件，Sort元素排序組件，BaseEdit元素樣式編輯組件

draggable是vuedraggable的組件我就很少說了，下面咱們來看一下Sort.vue文件是怎麼樣的

六、Sort.vue

這個文件實際上是挺好理解的就是顯示組件視圖，這裏咱們能夠看到咱們引入了Btn.vue、TextCp.vue這個兩個組件，當拖拽組件到Sort的時候回顯相應的組件視圖。在Sort.vue也要引入vuex由於咱們須要更新視圖只要更新數據就能夠了，這也是數據驅動的好處，不用再頻繁的操做DOM。

七、BaseEdit.vue

這個就是編輯器組件，能夠回顯並編輯組件的數據。每一個組件都會有一個本身單獨的編輯器組件，原本想把編輯組件放到放到組件自己去會更好，可能會在下次更新github會封裝在一塊兒。

接下來咱們看看每一個組件具體是怎麼寫的

八、TextCp.vue

九、TextCpEdit.vue

十、DeleteCp.vue

這是對組件進行刪除操做的刪除組件

總結

說一下編寫組件的基本流程

一、dragapi.js添加一項組件

二、componentsData.js 添加組件建立時須要初始化的數據

三、寫xxx.vue組件（在Sort視圖中顯示）

四、寫xxxEdit.vue組件（組件的特有編輯器）

看一下最終的效果

因爲這是本人第一次寫技術貼，有不少不足的地方，請你們諒解。若是有什麼地方寫得不明白能夠到github下載源碼研究一下，或者在下面評論或者提issues。

最後把源碼附上 源碼地址

https://github.com/dykily/dragWidget