這篇文章給大家分享的是有關(guān)怎么使用vue構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為賓縣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站，賓縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

寫在前面

之前一直用Jquery+Jquery-ui來(lái)做這個(gè)項(xiàng)目，那個(gè)時(shí)候沒(méi)有設(shè)計(jì)稿，沒(méi)有項(xiàng)目需求，就因?yàn)锽OSS一句話，要做這樣的東西，當(dāng)時(shí)就...好吧！我承認(rèn)，其實(shí)已經(jīng)習(xí)慣了，無(wú)所謂了(也是無(wú)奈，哎)!!!

在之后的一段時(shí)間里，做了一個(gè)demo出來(lái)，BOSS很滿意了，所以自己接下來(lái)就慢慢做吧，差不多兩三個(gè)月吧，就悶頭做這個(gè)，后來(lái)項(xiàng)目上線了，當(dāng)然因?yàn)楫a(chǎn)品的不完善，還是有點(diǎn)問(wèn)題了！

不過(guò)基本能滿足公司的需求了，能編輯的都可以編輯，組件的background(包括背景圖片) color border box-shadow margin padding width height 對(duì)齊方式(字體和組件內(nèi)部元素) border-radius font(font-size/font-family)等等這些基礎(chǔ)的都可以隨心變更，當(dāng)然考慮到可能滿足不了公司的使用，就加了一個(gè)自定義樣式的功能，而這個(gè)只有懂前端的人才能使用了，沒(méi)辦法，需求永遠(yuǎn)趕不上變化，這樣保險(xiǎn)一點(diǎn)。因?yàn)榇蠹叶贾溃枨蟮臐M足和變更永遠(yuǎn)跑在現(xiàn)成需求的前面

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

包括后來(lái)，因?yàn)橛薪M件內(nèi)部個(gè)別元素不能修改，又增加了[綁定修改]功能，就是這個(gè)功能選中之后，在視圖界面，選中需要修改的元素，便可以進(jìn)行修改了，這個(gè)功能還是有點(diǎn)意思的

說(shuō)了這么多，其實(shí)當(dāng)時(shí)因?yàn)樽龅膫}(cāng)促，存儲(chǔ)的時(shí)候存的是HTML,大家不要鄙視(要臉0.0),這個(gè)也是我心里一直的梗，最近加上BOSS重新提出了一些想法，有蠻多東西要加，思前想后,決定將項(xiàng)目重構(gòu)一下

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

開發(fā)準(zhǔn)備

1、使用vue-cli，下載下來(lái)配置好的東西
2、因?yàn)橹虚g牽涉了拖拽生成組件的操作，所以使用了vuedraggable和sortablejs。

安裝vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

項(xiàng)目中我們只需要引入vuedraggable就可以了，牽涉了sortablejs東西的時(shí)候，vuedraggable會(huì)去自己加載調(diào)用sortablejs里面的方法的，這個(gè)就不是我們需要關(guān)注的(你如果想了解，可以自己去看看)；

3、安裝vuex，因?yàn)槔锩鏍可娴搅舜罅康臄?shù)據(jù)交互，很多組件都需要一些公用的數(shù)據(jù)，不使用vuex去管理，將會(huì)為開發(fā)帶來(lái)更多不必要的麻煩;

安裝vuex

npm install --save vuex

4、因?yàn)闆](méi)有設(shè)計(jì)稿的緣故，所以大膽使用了第三方UI庫(kù) element-ui;

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

安裝elememt

npm install element-ui
//為什么是element-ui而不是element?因?yàn)楫?dāng)時(shí)npm上已經(jīng)有了element包了(我當(dāng)時(shí)還覺(jué)得挺有意思的，0.0 好冷啊！！！)

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

安裝axios

npm install --save axios

差不多準(zhǔn)備工作就這些了，接下來(lái)我們看項(xiàng)目實(shí)施；

項(xiàng)目開始

1、各種文件的配置

-> main.js中文件的配置

圖片中都有解釋，應(yīng)該可以看的懂的；

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

因?yàn)槲募L(zhǎng)，所以刪掉了一些，這里就是一個(gè)簡(jiǎn)單的格式，僅供參考，不作為標(biāo)準(zhǔn)；

在組件當(dāng)中，存在一個(gè)布局的問(wèn)題，所以要有布局組件，讓組件可以放到布局組建中，這樣才更加的靈活

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

說(shuō)明：

1、因?yàn)橛脩粼谕献е笠獙?shí)時(shí)保存到sessionStorage中， 所以再初始的時(shí)候要到sessionStroage中去取數(shù)據(jù)，防止突然刷新頁(yè)面，還沒(méi)有保存到數(shù)據(jù)庫(kù)中，用戶剛剛編輯的數(shù)據(jù)全部丟失的情況;
2、這里說(shuō)明一下，可能考慮到用于已經(jīng)提交了數(shù)據(jù)，所以用戶關(guān)閉窗口之后，再次進(jìn)來(lái)的時(shí)候，要結(jié)合后臺(tái)給出的用戶之前的數(shù)據(jù)，一起存儲(chǔ)到sessionStorage中去，相信這一點(diǎn)大家肯定想的到的，這里善意提醒一下 0.0；
3、我這這里暫時(shí)放了四個(gè)參數(shù)，圖中都有說(shuō)明，我主要是將基本編輯做成了一個(gè)組件，會(huì)根據(jù)用戶點(diǎn)擊時(shí)哪個(gè)組件，而重新渲染數(shù)據(jù)給到編輯組件，從而可以實(shí)時(shí)對(duì)應(yīng)到點(diǎn)擊的組件去編輯；
4、editShow的作用就是控制編輯組件顯示與否的，主要?jiǎng)h除組件的時(shí)候，讓編輯組件隱藏一下；點(diǎn)擊其他組件的顯示一下；

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

2、項(xiàng)目開發(fā)開始

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

<template>
 <!--用的element-ui-->
 <el-container>
  <el-aside>
   <Draggable class="app-aside-drag" :options="dragOption">
    <div class="app-aside-list" 
     v-for="(dragList,index) in dragData" 
     :type="dragList.type" 
     :key="dragList.type">
     <div class="aside-item-body">
      <i class="aside-item-ele"></i>
      <span class="aside-item-ele">{{ list.title }}</span>
     </div>
    </div>
   </Draggable>
  <el-aside>
  <el-main class="app-main">
   <section class="app-phone">
    <div class="app-phone-header">
     <span class="phone-camera"></span>
     <span class="phone-ls"></span>
    </div>
    <!--頁(yè)面view區(qū) -->
    <Sort class="app-phone-body"></Sort>
    <div class="app-phone-footer">
     <button class="app-phone-menu">RS</button>
    </div>
   </section>
  </el-main>
  <el-aside class="app-right">
   <!--組件編輯區(qū)域-->
   <BaseEdit></BaseEdit>
  </el-aside>
 </el-container> 
</template>

<script>
import DragApi from "@/dragapi/dragapi.js";
import Draggable from "vuedraggable";
import Sort from "@/view/Sort";
import BaseEdit from "@/view/BaseEdit";

export default {
 name: 'app',
 data(){
  return{
   dragData: {},
   dragOption: {
    group: {
     name: 'components', //這個(gè)很重要，其他的與之能產(chǎn)生關(guān)聯(lián)的拖拽框就靠這name 一定要一致
     pull: 'clone', 
     put: false
    },
    sort: false //默然為true。這里我們只需要他拖拽，無(wú)需能拖動(dòng)排序
   }
  }
 },
 components: {
  Draggable,
  Sort,
  BaseEdit
 },
 created(){
  //側(cè)邊欄拖拽列表數(shù)據(jù)
  //這里我只寫了組件的數(shù)據(jù)進(jìn)來(lái)，布局的暫時(shí)沒(méi)放
  this.dragData = DragApi.configList[1].content;
 }
}
</script>

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

<template>
 <Draggable :options="sortOption"
  @sort="onSort"
  @add="onAdd"
  class="app-sort">
  <!-- ui組件 -->
  <!--這里不懂的人，可以去vue官網(wǎng)看看動(dòng)態(tài)組件-->
  <div v-for="(appUi,index) in sortApi" //循環(huán)組件
    :is="appUi.component" //根據(jù)存在的組件渲染出來(lái)
    :content="appUi.content"
    :oStyle="appUi.style"
    :editPartShow="appUi.editPartShow"
    :aIndex="index"
    //組件想要點(diǎn)擊生效，只需要@click.native就行了
    @click.native="getIndex(index)"
    //key值一定要給出來(lái)，不然相同組件的排序可能會(huì)不成功
    :key="appUi.content.code">
  </div>
 </Draggable>
</template>
<script>
 //利用vuex 輔助函數(shù)來(lái)操作vuexjs中的數(shù)據(jù)
 import { mapState,mapMutations } from 'vuex';
 //拖拽插件引入
 import Draggable from 'vuedraggable';
 //各個(gè)組件引入
 import Carousel from "@/components/Carousel.vue";
 import Btn from "@/components/Btn.vue";

 export default {
  name: 'Sort',
  components: {
   Draggable,Btn,Carousel
  },
  data(){
   return {
    sortOption: {
     group: {
      name: 'components', //前面說(shuō)的name,在這里就起了作用，不一樣，是不能放入的
      pull: true,
      put: true
     },
     sort: true,
     animation: 300 //給了個(gè)動(dòng)畫，看起來(lái)舒服些
    }
   }
  },
  computed:{
   ...mapState(['editIndex','sortApi']),
  },
  watch:{
   sortApi:{
    handler(newVal,oldVal){
     window.sessionStorage.setItem('localData',JSON.stringify(newVal));
    },
    deep: true
   }
  },
  methods:{
   ...mapMutations(['sortCp','addCp','setStyle','setCommon']),
   onSort(res){ //排序產(chǎn)生的事件
    if(res.from === res.to){
     this.sortCp(res);
    }
   },
   onAdd(res){//組件增加產(chǎn)生的事件
    this.addCp(res);
   },
   getIndex(index){
    this.setCommon({index: index,flag: true});
   }
  }
 }
</script>

-> 再來(lái)看看編輯組件

<template>
 <transition name="slide-right">
  <div v-if="sortApi.length > 0 && editShow === true">
   //組件特有編輯
   <el-tabs v-model="activeName">
    <el-tab-pane label="組件設(shè)置" name="first">
     <div v-for="(appUi,index) in sortApi"
       :is="appUi.component+'Edit'"
       :content="appUi.content"
       :oStyle="appUi.style"
       :editPartShow="appUi.editPartShow"
       :aIndex="index"
       :currentIndex="editIndex"
       :key="appUi.content.code">
     </div>
    </el-tab-pane>
    <el-tab-pane label="樣式設(shè)置" name="second">
     //公共樣式編輯
     <el-collapse v-model="colorPicker.name" class="base-edit" accordion>
      <el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
       <el-form ref="form" :model="colorPicker" size="mini">
        <el-form-item class="cui-inline-reset"
         v-for="(item,index) in colorPicker.content"
         :label="item.title"
         :key="item.style">
         <el-color-picker
          //在element-ui框架中，有很多@change @active-change事件，直接寫事件發(fā)現(xiàn)不能傳入?yún)?shù)，
          //當(dāng)然，辦法總比問(wèn)題多，我們換成一下這種寫法就行了，他的默然參數(shù)寫在前面
          //這里顏色拾取器 返回的是實(shí)時(shí)的顏色值
          //我這里主要想傳一個(gè)對(duì)應(yīng)的style
          @active-change=" (value) => setStyle(value,item.style)"
          v-model="sortApi[editIndex].style[item.style]"
          show-alpha>
         </el-color-picker>
         <span class="black-text-shadow"
          :>
          {{ sortApi[editIndex].style[item.style] }}
         </span>
        </el-form-item>
       </el-form>
      </el-collapse-item>
     </el-collapse>
    </el-tab-pane>
   </el-tabs>
  </div>
 </transition>
</template>
<script>
 import { mapState,mapMutations } from 'vuex';
 //這里我將組建特有的編輯欄，寫成了一個(gè)組件，為什么不寫在相應(yīng)的組件一起了？
 //這里必須說(shuō)明一下，主要是我沒(méi)有想到方法，讓他在同一組件內(nèi)分離出來(lái)，單獨(dú)將dom結(jié)構(gòu)放在編輯欄這里，如果有大神知道
 //還望不吝賜教
 import BtnEdit from "@/components/BtnEdit.vue";
 
 export default{
  name: 'BaseEdit',
  components: {
   BtnEdit
  },
  data(){
   return{
    colorPicker: {
     type: '顏色設(shè)置',
     name: 'Picker',
     content:[
      {
       title: '背景顏色',
       style: 'background'
      },
      {
       title: '字體顏色',
       style: 'color'
      }
     ]
     
    },
    activeName: 'first'
   }
  },
  
  computed:{
   ...mapState(['editIndex','sortApi','editShow'])
  },
  methods:{
   setStyle(value,style){
    //根據(jù)上面?zhèn)魅氲膕tyle屬性，實(shí)時(shí)改變現(xiàn)有的值
    this.$set(this.sortApi[this.editIndex].style,style,value);
   }
  }
 }
</script>

-> 選出一個(gè)組件來(lái)看看里面是怎么配置的

//按鈕組件，其實(shí)里面很簡(jiǎn)單
//組件的對(duì)應(yīng)的編輯組件，里面內(nèi)容和這個(gè)也差不多，下面就不寫了
<template>
 <div class="btn-box ui-sortable" :data-code="content.code">
  <el-button class="ui-btn"
   :>
   {{ content.text }}
  </el-button>
  //因?yàn)槊總€(gè)組件都有刪除功能，所以寫成了一個(gè)組件
  <DeleteCp :aIndex="aIndex"></DeleteCp>
 </div>
</template>
<script>
 import DeleteCp from "@/components/DeleteCp";
 export default {
  name: 'Btn',
  props: { //父組件傳入的參數(shù)
   content: Object,
   oStyle: Object,
   aIndex: Number
  },
  components: {
   DeleteCp
  },
  data(){
   return{
    btnModel: 'btn-model'
   }
  }
 }
</script>

->最后來(lái)看看刪除組件吧

<template>
 <div class="delete-compontent-box">
  <div class="el-icon-delete remove-component" @click.stop="dailogStatu"></div>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   :append-to-body="appendToBody"
   width="430px">
   <div class="el-message-box__content">
    <div class="el-message-box__status el-icon-warning"></div>
    <div class="el-message-box__message dialog-message">此操作將刪除該模塊, 是否繼續(xù)?</div>
   </div>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="onRemove(aIndex)" size="small">確 定</el-button>
   </span>
  </el-dialog>
 </div>
</template>

<script>
 import { mapMutations } from "vuex";
 export default {
  name: 'oText',
  props: {
   aIndex: Number
  },
  data(){
   return{
    //這兩個(gè)參數(shù)是彈框的參數(shù)
    dialogVisible: false,
    appendToBody: true 
   }
  },
  methods:{
   ...mapMutations(['deleteCp','setCommon']),
   dailogStatu(){
   //主要是控制彈窗出來(lái)，并且顯示該組件對(duì)應(yīng)的編輯欄
    this.dialogVisible = true;
    this.setCommon({flag: true,index: this.aIndex})
   },
   onRemove(index){
    //點(diǎn)擊確定刪除對(duì)應(yīng)的組件
    let flag = false;
    this.deleteCp(index);
    this.dialogVisible = false;
    this.$message({
     message: '該模塊已刪除 !',
     type: 'success'
    });
    this.setCommon({flag: false,index: 0})
   }
  }
 }
</script>

-> 來(lái)看看效果圖吧

效果圖展示

感謝各位的閱讀！關(guān)于“怎么使用vue構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：怎么使用vue構(gòu)建一個(gè)自動(dòng)建站項(xiàng)目-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.chinadenli.net/article16/dccodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)