這篇文章給大家分享的是有關怎么使用vue構建一個自動建站項目的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們擁有10余年網(wǎng)頁設計和網(wǎng)站建設經驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設計師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站建設、成都做網(wǎng)站、微信開發(fā)、微信平臺小程序開發(fā)、成都做手機網(wǎng)站、成都h5網(wǎng)站建設、等業(yè)務。無論您有什么樣的網(wǎng)站設計或者設計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設計服務并滿足您的需求。

寫在前面

之前一直用Jquery+Jquery-ui來做這個項目，那個時候沒有設計稿，沒有項目需求，就因為BOSS一句話，要做這樣的東西，當時就...好吧！我承認，其實已經習慣了，無所謂了(也是無奈，哎)!!!

在之后的一段時間里，做了一個demo出來，BOSS很滿意了，所以自己接下來就慢慢做吧，差不多兩三個月吧，就悶頭做這個，后來項目上線了，當然因為產品的不完善，還是有點問題了！

不過基本能滿足公司的需求了，能編輯的都可以編輯，組件的background(包括背景圖片) color border box-shadow margin padding width height 對齊方式(字體和組件內部元素) border-radius font(font-size/font-family)等等這些基礎的都可以隨心變更，當然考慮到可能滿足不了公司的使用，就加了一個自定義樣式的功能，而這個只有懂前端的人才能使用了，沒辦法，需求永遠趕不上變化，這樣保險一點。因為大家都知道，需求的滿足和變更永遠跑在現(xiàn)成需求的前面

除了這些基礎的可更改，各個組件的特有可變更的功能也基本齊全的，比如輪播圖圖片變更，輪播方式，控制是否輪播等等這些功能，這里就不一一介紹了

包括后來，因為有組件內部個別元素不能修改，又增加了[綁定修改]功能，就是這個功能選中之后，在視圖界面，選中需要修改的元素，便可以進行修改了，這個功能還是有點意思的

說了這么多，其實當時因為做的倉促，存儲的時候存的是HTML,大家不要鄙視(要臉0.0),這個也是我心里一直的梗，最近加上BOSS重新提出了一些想法，有蠻多東西要加，思前想后,決定將項目重構一下

考慮到vue響應式與基本是純數(shù)據(jù)操作，所以決定使用vue重新構建這個項目。

開發(fā)準備

1、使用vue-cli，下載下來配置好的東西
2、因為中間牽涉了拖拽生成組件的操作，所以使用了vuedraggable和sortablejs。

安裝vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

項目中我們只需要引入vuedraggable就可以了，牽涉了sortablejs東西的時候，vuedraggable會去自己加載調用sortablejs里面的方法的，這個就不是我們需要關注的(你如果想了解，可以自己去看看)；

3、安裝vuex，因為里面牽涉到了大量的數(shù)據(jù)交互，很多組件都需要一些公用的數(shù)據(jù)，不使用vuex去管理，將會為開發(fā)帶來更多不必要的麻煩;

安裝vuex

npm install --save vuex

4、因為沒有設計稿的緣故，所以大膽使用了第三方UI庫 element-ui;

element-ui官網(wǎng)地址

安裝elememt

npm install element-ui
//為什么是element-ui而不是element?因為當時npm上已經有了element包了(我當時還覺得挺有意思的，0.0 好冷?。。?！)

5、axios安裝,后面與后臺數(shù)據(jù)交互會用到

安裝axios

npm install --save axios

差不多準備工作就這些了，接下來我們看項目實施；

項目開始

1、各種文件的配置

-> main.js中文件的配置

圖片中都有解釋，應該可以看的懂的；

-> 側邊欄拖拽組件數(shù)據(jù)的配置

因為文件太長，所以刪掉了一些，這里就是一個簡單的格式，僅供參考，不作為標準；

在組件當中，存在一個布局的問題，所以要有布局組件，讓組件可以放到布局組建中，這樣才更加的靈活

-> vuexjs 狀態(tài)管理中的js配置

說明：

1、因為用戶在拖拽之后要實時保存到sessionStorage中， 所以再初始的時候要到sessionStroage中去取數(shù)據(jù)，防止突然刷新頁面，還沒有保存到數(shù)據(jù)庫中，用戶剛剛編輯的數(shù)據(jù)全部丟失的情況;
2、這里說明一下，可能考慮到用于已經提交了數(shù)據(jù)，所以用戶關閉窗口之后，再次進來的時候，要結合后臺給出的用戶之前的數(shù)據(jù)，一起存儲到sessionStorage中去，相信這一點大家肯定想的到的，這里善意提醒一下 0.0；
3、我這這里暫時放了四個參數(shù)，圖中都有說明，我主要是將基本編輯做成了一個組件，會根據(jù)用戶點擊時哪個組件，而重新渲染數(shù)據(jù)給到編輯組件，從而可以實時對應到點擊的組件去編輯；
4、editShow的作用就是控制編輯組件顯示與否的，主要刪除組件的時候，讓編輯組件隱藏一下；點擊其他組件的顯示一下；

基本的配置就這些了，接下來就是真正的開發(fā)了;

2、項目開發(fā)開始

-> app.vue文件中該怎么寫？

-> 來看看sort view視圖區(qū)域組件

-> 再來看看編輯組件

-> 選出一個組件來看看里面是怎么配置的

//按鈕組件，其實里面很簡單
//組件的對應的編輯組件，里面內容和這個也差不多，下面就不寫了

->最后來看看刪除組件吧

-> 來看看效果圖吧

效果圖展示

感謝各位的閱讀！關于“怎么使用vue構建一個自動建站項目”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！