閒裡偷忙，來點Vue

BenTuTu發表於2018-03-05

前言

最近對vue學習一段時間之後，於是自己打算通過學習實現了一個專案，在這裡想與看到的您分享實戰中踩過的雷和關於一些細節的處理技巧，最主要的還是原生元件的實現。由於主要是前端介面的實現，所以在後臺使用的是express來模擬資料，當然你還可以選擇json-server和easy-mock這些都能進行資料的模擬。不過自己在使用過程中發現json-server使用post請求時會出現問題，查詢很多文件和資料都沒找到解決的辦法，最後選擇了express也是非常的簡單！！！

不過這裡需要注意，VUE開發請求本地資料的配置，早期的vue-lic下面有dev-server.js和dev-client.js兩檔案，請求本地資料在dev-server.js裡配置，最新的vue-webpack-template中已經去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以配置本地訪問在webpack.dev.conf.js裡配置即可。需要進行學習的同學可以檢視基於vue-cli及express模擬Ajax獲取伺服器資料這裡面講的非常的詳細，程式碼只要直接copy過來就能用，看完要注意在配置介面埠號的時候不能用port + 1，不然會報錯--port未定義，這裡我們手動設定埠號為8081就好啦！

技術棧

vue + vuex + express + webpack

結構簡介

佈局結構

主介面分為上中下結構，header和footer相對簡單直接在layout.vue中實現，中間的主體部分抽離為一個元件index.vue，主體部分又分為左右兩個部分，左邊為導航條，右上邊為一個輪播元件，右下方是四個商品購買功能。
檔案結構

瀏覽器圖示和標題的實現步驟

設定屬於自己專案特定的圖示

在專案的根目錄下找到index.html然後在head裡面加上下面的這句程式碼
```
<link rel="shortcut icon" type="image/x-icon" href="static/home.ico">
複製程式碼
```
在這裡要注意的是圖示檔案的位置，不能放到src裡，這樣的路徑會讓瀏覽器找不到。網頁把根域名作為相對路徑的根目錄了，然而我們檔案的路徑是相對於專案檔案的根目錄的，因此就找不到了。於是我們需要把靜態檔案放在static檔案下。最後重新整理一下介面圖示就出來咯！！！詳細解釋請點選檢視
設定單頁介面的標題

這裡使用到了第三方npm包vue-wechat-title，安裝好外掛後需要在main.js匯入外掛如下圖：
接下來就需要為我們的router-view設定標題了，我們每個需要切換的頁面只需要加上下面紅框的程式碼就OK：
經過前面的兩步，我們基本就完成了，還有最後重要的一步則要讓介面跳轉時知道我們設定的title，需要在router-view裡面修改成如下就OK了：
```
<router-view v-wechat-title='$route.meta.title'></router-view>
複製程式碼
```
詳細解釋請檢視單頁面如何設定網頁title

這樣設定後就可以立即看到介面出現我們想要的標題和首頁圖示啦！！！

關於登入

登入功能一般都是使用一個彈窗元件來實現，先讓我們看看效果圖：

失敗的情況：

成功的情況：

這裡對使用者名稱和密碼的輸入限制使用正則做了簡單的處理，開始出現一點選登入按鈕“非法輸入”就出現，為了解決這一個問題，使用了一個計算屬性實時監控非法提示，它返回state和errorText兩個資訊：

userErrors () {
        let state, errorText;
        const reg = /^1\d{10}$/;
        if (reg.test(this.userNameModel)) {
            state = false;
            errorText = '';
        }else {
            state = true;
            errorText = '輸入非法';
        }
        if (!this.isFlag) {
          errorText = '';
          this.isFlag = true;
        }
        return {
            state,
            errorText
        }
}
複製程式碼

關於元件

對於元件的實現，對於大多數像我一樣的新手來說考慮問題往往不能非常的全面，所做出來的也就會有侷限性、通用性不強。一些需要被使用者修改的引數沒有提供介面。每次修改就會說自己笨到死，哈哈！！！

輪播元件

組成：圖片 + 當前圖片碼 + 切換條

  <div class="slide-img">
      <a :href="slides[nowIndex].href">
          <transition name="slide-trans">
              <img v-if="isShow" :src="slides[nowIndex].src">
          </transition>
          <transition name="slide-trans-old">
              <img v-if="!isShow" :src="slides[nowIndex].src">
          </transition>
      </a>
  </div>
  
  <h2>{{ slides[nowIndex].title }}</h2>
  
  <ul class="slide-pages">
      <li @click="goto(prevIndex)">&lt;</li>
      <li v-for="(item, index) in slides" :key="item.id" @click="goto(index)">
          <a :class="(nowIndex === index) ? 'on':''">{{ index + 1 }}</a>
      </li>
      <li @click="goto(nextIndex)">&gt;</li>
  </ul>
複製程式碼

關鍵程式碼：讓圖片動起來

  computed: {
      //   使用計算屬性來實現迴圈播放
      prevIndex () {
            if (this.nowIndex != 0) return this.nowIndex - 1;
            else return this.slides.length - 1;
        },
        nextIndex () {
            if (this.nowIndex === this.slides.length - 1) return 0;
            else return this.nowIndex + 1;
        }
  },
 goto (index) {
      this.isShow = false;
      setTimeout(() => {
          this.nowIndex = index;
          this.isShow = true;
      }, 100);
  },
  runInv () {
      this.invId = setInterval(() => {
          this.goto(this.nextIndex);
      }, this.inv);
  }
複製程式碼

沒錯和你想的一樣，就是使用計時器 + 計算屬性咯！！！這裡的goto()函式也出現一個計時器但是使用的卻不一樣，關於這個相比了解計時器的都知道使用setTimeout()只執行一次code，如果想無限執行需要這樣寫:

function timedCount(){"需要執行的程式碼" + t=setTimeout("timedCount()",1000)}而使用setInterval()則可以達到一樣的效果。迴歸正題如果不使用setTimeout()看到圖片切換效果很生硬，加了時間差我們就可以看到專案中平滑的切換了！！在這裡我們看到前面兩個<img v-if="isShow" :src="slides[nowIndex].src">裡面的src都一樣，但是兩個nowIndex卻不是同一張圖片，看isShow和goto()函式的引數，想必聰明的你一定明白了！