閒裏偷忙，來點Vue

時間 2019-11-16

標籤 vue 简体版

原文原文鏈接

前言

最近對vue學習一段時間以後，因而本身打算經過學習實現了一個項目，在這裏想與看到的您分享實戰中踩過的雷和關於一些細節的處理技巧，最主要的仍是原生組件的實現。因爲主要是前端界面的實現，因此在後臺使用的是express來模擬數據，固然你還能夠選擇json-server和easy-mock這些都能進行數據的模擬。不過本身在使用過程當中發現json-server使用post請求時會出現問題，查找不少文檔和資料都沒找到解決的辦法，最後選擇了express也是很是的簡單！！！html

不過這裏須要注意，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 + webpackvue

結構簡介

佈局結構webpack

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

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

設置屬於本身項目特定的圖標web

在項目的根目錄下找到index.html而後在head裏面加上下面的這句代碼vuex
```
<link rel="shortcut icon" type="image/x-icon" href="static/home.ico">
複製代碼
```
在這裏要注意的是圖標文件的位置，不能放到src裏，這樣的路徑會讓瀏覽器找不到。網頁把根域名做爲相對路徑的根目錄了，然而咱們文件的路徑是相對於項目文件的根目錄的，所以就找不到了。因而咱們須要把靜態文件放在static文件下。最後刷新一下界面圖標就出來咯！！！詳細解釋請點擊查看vue-cli
設置單頁界面的標題express

這裏使用到了第三方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()函數的參數，想必聰明的你必定明白了！