• 列表進入詳情頁的傳參問題。
  
• 本地開發環境請求伺服器介面跨域的問題
  
• axios封裝和api介面的統一管理
• UI庫的按需載入
  
• 如何優雅的只在當前頁面中覆蓋ui庫中元件的樣式
• 定時器問題
  
• rem檔案的匯入問題
  
• Vue-Awesome-Swiper基本能解決你所有的輪播需求
  
• 打包後生成很大的.map檔案的問題
  
• fastClick的300ms延遲解決方案
  
• 元件中寫選項的順序
  
• 路由懶載入（也叫延遲載入）
  
• 開啟gzip壓縮程式碼
  
• 詳情頁返回列表頁快取資料和瀏覽位置、其他頁面進入列表頁刷洗資料的實踐
  
• css的scoped私有作用域和深度選擇器
• hiper開啟速度測試
• vue資料的兩種獲取方式+骨架屏
• 自定義元件（父子元件）的雙向資料繫結
• 路由的拆分管理
• mixins混入簡化常見操作
• 打包之後檔案、圖片、背景圖資源不存在或者路徑錯誤的問題
  
• vue外掛的開發、釋出到github、設定展示地址、釋出npm包

===========================這是華麗麗的分割線~~=========================

列表進入詳情頁的傳參問題。

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail頁面</router-link>複製程式碼

c頁面的路徑為http://localhost:8080/#/detail?id=1，可以看到傳了一個引數id=1，並且就算重新整理頁面id也還會存在。此時在c頁面可以通過id來獲取對應的詳情資料，獲取id的方式是this.$route.query.id

vue傳參方式有：query、params+動態路由傳參。

說下兩者的區別：

    1.query通過path切換路由，params通過name切換路由

// query通過path切換路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail頁面</router-link>
// params通過name切換路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail頁面</router-link>複製程式碼

    2.query通過this.$route.query來接收引數，params通過this.$route.params來接收引數。

// query通過this.$route.query接收引數
created () {
    const id = this.$route.query.id;
}

// params通過this.$route.params來接收引數
created () {
    const id = this.$route.params.id;
}複製程式碼

    3.query傳參的url展現方式：/detail?id=1&user=123&identity=1&更多引數

       params＋動態路由的url方式：/detail/123

    4.params動態路由傳參，一定要在路由中定義引數，然後在路由跳轉的時候必須要加上引數，否則就是空白頁面：

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
},複製程式碼

注意，params傳參時，如果沒有在路由中定義引數，也是可以傳過去的，同時也能接收到，但是一旦重新整理頁面，這個引數就不存在了。這對於需要依賴引數進行某些操作的行為是行不通的，因為你總不可能要求使用者不能重新整理頁面吧。 例如：

// 定義的路由中，只定義一個id引數
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

// template中的路由傳參，
// 傳了一個id引數和一個token引數
// id是在路由中已經定義的引數，而token沒有定義
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail頁面</router-link>

// 在詳情頁接收
created () {
    // 以下都可以正常獲取到
    // 但是頁面重新整理後，id依然可以獲取，而token此時就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}複製程式碼

本地開發環境請求伺服器介面跨域的問題

上面的這個報錯大家都不會陌生，報錯是說沒有訪問許可權（跨域問題）。本地開發專案請求伺服器介面的時候，因為客戶端的同源策略，導致了跨域的問題。

下面先演示一個沒有配置允許本地跨域的的情況：

可以看到，此時我們點選獲取資料，瀏覽器提示我們跨域了。所以我們訪問不到資料。

那麼接下來我們演示設定允許跨域後的資料獲取情況：

注意：配置好後一定要關閉原來的server，重新npm run dev啟動專案。不然無效。

我們在1出設定了允許本地跨域，在2處，要注意我們訪問介面時，寫的是/api，此處的/api指代的就是我們要請求的介面域名。如果我們不想每次介面都帶上/api，可以更改axios的預設配置axios.defaults.baseURL = '/api';這樣，我們請求介面就可以直接this.$axios.get('app.php?m=App&c=Index&a=index')，很簡單有木有。此時如果你在network中檢視xhr請求，你會發現顯示的是localhost:8080/api的請求地址。這樣沒什麼大驚小怪的，代理而已：

好了，最後附上proxyTable的程式碼：

proxyTable: {
      // 用‘/api’開頭，代理所有請求到目標伺服器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 介面域名
        changeOrigin: true, // 是否啟用跨域
        pathRewrite: { //
          '^/api': ''
        }
      }
}複製程式碼

注意：配置好後一定要關閉原來的server，重新npm run dev啟動專案。不然無效。

axios封裝和api介面的統一管理

axios的封裝，主要是用來幫我們進行請求的攔截和響應的攔截。

在請求的攔截中我們可以攜帶userToken，post請求頭、qs對post提交資料的序列化等。

在響應的攔截中，我們可以進行根據狀態碼來進行錯誤的統一處理等等。

axios介面的統一管理，是做專案時必須的流程。這樣可以方便我們管理我們的介面，在介面更新時我們不必再返回到我們的業務程式碼中去修改介面。

由於這裡內容稍微多一些，放在另一篇文章，這裡送上鍊接。

UI庫的按需載入:

為什麼要使用按需載入的方式而不是一次性全部引入，原因就不多說了。這裡以vant的按需載入為例，演示vue中ui庫怎樣進行按需載入：

• 安裝： cnpm i vant -S
• 安裝babel-plugin-import外掛使其按需載入：  cnpm i babel-plugin-import -D
• 在 .babelrc檔案中中新增外掛配置 ：

libraryDirectory { 
    
    "plugins": [ 
        // 這裡是原來的程式碼部分
        // …………

        // 這裡是要我們配置的程式碼
        ["import", 
            { 
                "libraryName": "vant", 
                "libraryDirectory": "es", 
                "style": true 
            }
        ] 
    ] 
}複製程式碼

• 在main.js中按需載入你需要的外掛：

// 按需引入vant元件
import {   
    DatetimePicker,   
    Button,   
    List 
} from 'vant';複製程式碼

• 使用元件：

// 使用vant元件
Vue.use(DatetimePicker)  
    .use(Button)  
    .use(List);複製程式碼

• 最後在在頁面中使用：

<van-button type="primary">按鈕</van-button>複製程式碼

ps：出來vant庫外，像antiUi、elementUi等，很多ui庫都支援按需載入，可以去看文件，上面都會有提到。基本都是通過安裝babel-plugin-import外掛來支援按需載入的，使用方式與vant的如出一轍，可以去用一下。

如何優雅的只在當前頁面中覆蓋ui庫中元件的樣式

首先我們vue檔案的樣式都是寫在<style lang="less" scoped></style>標籤中的，加scoped是為了使得樣式只在當前頁面有效。那麼問題來了，看圖：

我們正常寫的所有樣式，都會被加上[data-v-23d425f8]這個屬性（如1所示），但是第三方元件內部的標籤並沒有編譯為附帶[data-v-23d425f8]這個屬性。所以，我們想修改元件的樣式，就沒轍了。怎麼辦呢，有些小夥伴給第三方元件寫個class，然後在一個公共的css檔案中或者在當前頁面再寫一個沒有socped屬性的style標籤，然後直接在裡面修改第三方元件的樣式。這樣不失為一個方法，但是存在全域性汙染和命名衝突的問題。約定特定的命名方式，可以避免命名衝突。但是還是不夠優雅。

作為一名優（強）秀（迫）的（症）前（患）端（者），怎麼能允許這種情況出現呢？好了，下面說下優雅的解決方式：

通過深度選擇器解決。例如修改上圖中元件裡的van-ellipsis類的樣式，可以這樣做：

.van-tabs /deep/ .van-ellipsis { color: blue};
複製程式碼

編譯後的結果就是：

這樣就不會給van-ellipsis也新增[data-v-23d425f8]屬性了。至此你可以愉快的修改第三方元件的樣式了。

當然了這裡的深度選擇器/deep/是因為我用的less語言，如果你沒有使用less/sass等，可以用>>>符號。

更多的關於深度選擇器的內容，在文章後面有介紹。

定時器問題:

我在a頁面寫一個定時，讓他每秒鐘列印一個1，然後跳轉到b頁面，此時可以看到，定時器依然在執行。這樣是非常消耗效能的。如下圖所示：

解決方法1：

首先我在data函式裡面進行定義定時器名稱：

data() {            
    return {                              
        timer: null  // 定時器名稱          
    }        
},複製程式碼

然後這樣使用定時器：

this.timer = (() => {
    // 某些操作
}, 1000)複製程式碼

最後在beforeDestroy()生命週期內清除定時器：

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}複製程式碼

• 它需要在這個元件例項中儲存這個 timer，如果可以的話最好只有生命週期鉤子可以訪問到它。這並不算嚴重的問題，但是它可以被視為雜物。
• 我們的建立程式碼獨立於我們的清理程式碼，這使得我們比較難於程式化的清理我們建立的所有東西。

解決方案2：

該方法是通過$once這個事件偵聽器器在定義完定時器之後的位置來清除定時器。以下是完整程式碼：

const timer = setInterval(() =>{                    
    // 某些定時器操作                
}, 500);            
// 通過$once來監聽定時器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})複製程式碼

方案2要感謝@zzx18023在評論區提供出的解決方案。類似於其他需要在當前頁面使用，離開需要銷燬的元件（例如一些第三方庫的picker元件等等），都可以使用此方式來解決離開後以後在背後執行的問題。

綜合來說，我們更推薦使用方案2，使得程式碼可讀性更強，一目瞭然。如果不清楚$once、$on、$off的使用，這裡送上官網的地址教程，在程式化的事件偵聽器那裡。

rem檔案的匯入問題：

我們在做手機端時，適配是必須要處理的一個問題。例如，我們處理適配的方案就是通過寫一個rem.js，原理很簡單，就是根據網頁尺寸計算html的font-size大小，基本上小夥伴們都知道，這裡直接附上程式碼，不多做介紹。

;(function(c,d){var e=document.documentElement||document.body,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;e.style.fontSize=(f>=750)?"100px":100*(f/750)+"px"};b();c.addEventListener(a,b,false)})(window);複製程式碼

這裡說下怎麼引入的問題，很簡單。在main.js中，直接import './config/rem'匯入即可。import的路徑根據你的檔案路徑去填寫。

Vue-Awesome-Swiper基本能解決你所有的輪播需求

在我們使用的很多ui庫（vant、antiUi、elementUi等）中，都有輪播元件，對於普通的輪播效果足夠了。但是，某些時候，我們的輪播效果可能比較炫，這時候ui庫中的輪播可能就有些力不從心了。當然，如果技術和時間上都還可以的話，可以自己造個比較炫的輪子。

這裡我說一下vue-awesome-swiper這個輪播元件，真的非常強大，基本可以滿足我們的輪播需求。swiper相信很多人都用過，很好用，也很方便我們二次開發，定製我們需要的輪播效果。vue-awesome-swiper元件實質上基於swiper的，或者說就是能在vue中跑的swiper。下面說下怎麼使用：

• 安裝 cnpm install vue-awesome-swiper --save
• 在元件中使用的方法，全域性使用意義不大：

// 引入元件
import 'swiper/dist/css/swiper.css' 
import { swiper, swiperSlide } from 'vue-awesome-swiper'

// 在components中註冊元件
components: {
    swiper,
    swiperSlide
}

// template中使用輪播
// ref是當前輪播
// callback是回撥
// 更多引數用法，請參考文件
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">            
    <!-- slides -->            
    <swiper-slide><div class="item">1</div></swiper-slide>            
    <swiper-slide><div class="item">2</div></swiper-slide>            
    <swiper-slide><div class="item">3</div></swiper-slide>            
          
    <!-- Optional controls -->            
    <div class="swiper-pagination"  slot="pagination"></div>            
    <div class="swiper-button-prev" slot="button-prev"></div>            
    <div class="swiper-button-next" slot="button-next"></div>            
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
複製程式碼

// 引數要寫在data中
data() {            
    return {     
        // swiper輪播的引數           
        swiperOption: { 
            // 滾動條                   
            scrollbar: {                        
                el: '.swiper-scrollbar',                    
            }, 
            // 上一張，下一張                   
            navigation: {                        
                nextEl: '.swiper-button-next',                        
                prevEl: '.swiper-button-prev',                    
            },
            // 其他引數…………   
        }            
    }                    
},複製程式碼

swiper需要配置哪些功能需求，自己根據文件進行增加或者刪減。附上文件：npm文件，swiper3.0/4.0文件，更多用法，請參考文件說明。

打包後生成很大的.map檔案的問題

專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。 而生成的.map字尾的檔案，就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯可以通過設定來不生成該類檔案。但是我們在生成環境是不需要.map檔案的，所以可以在打包時不生成這些檔案：

在config/index.js檔案中，設定productionSourceMap: false,就可以不生成.map檔案

fastClick的300ms延遲解決方案

開發移動端專案，點選事件會有300ms延遲的問題。至於為什麼會有這個問題，請自行百度即可。這裡只說下常見的解決思路，不管vue專案還是jq專案，都可以使用fastClick解決。

安裝 fastClick:

cnpm install fastclick -S複製程式碼

在main.js中引入fastClick和初始化:

import FastClick from 'fastclick'; // 引入外掛
FastClick.attach(document.body); // 使用 fastclick複製程式碼

元件中寫選項的順序

為什麼選項要有統一的書寫順序呢？很簡單，就是要將選擇和認知成本最小化。

1. 副作用 (觸發元件外的影響)

   • el

2. 全域性感知 (要求元件以外的知識)

   • name
   • parent

3. 元件型別 (更改元件的型別)

   • functional

4. 模板修改器 (改變模板的編譯方式)

   • delimiters
   • comments

5. 模板依賴 (模板內使用的資源)

   • components
   • directives
   • filters

6. 組合 (向選項裡合併屬性)

   • extends
   • mixins

7. 介面 (元件的介面)

   • inheritAttrs
   • model
   • props/propsData

8. 本地狀態 (本地的響應式屬性)

   • data
   • computed

9. 事件 (通過響應式事件觸發的回撥)

   • watch
   • 生命週期鉤子 (按照它們被呼叫的順序)
     • beforeCreate
     • created
     • beforeMount
     • mounted
     • beforeUpdate
     • updated
     • activated
     • deactivated
     • beforeDestroy
     • destroyed

10. 非響應式的屬性 (不依賴響應系統的例項屬性)

    • methods

11. 渲染 (元件輸出的宣告式描述)

    • template/render
    • renderError

export default new Router({
  routes: [    
        { 
            path: '/', 
            name: 'Index', 
            component: resolve => require(['@/view/index/index'], resolve) 
        }
   ]
})複製程式碼

build: {
    // 其他程式碼
    …………
    productionGzip: true, // false不開啟gizp，true開啟
    // 其他程式碼
}複製程式碼

beforeRouteEnter (to, from, next) {        
    api.article.articleDetail(to.query.id).then(res=> {            
        next(vm => {                
            vm.info = res.data;                
            vm.loadFinish = true            
        })        
    })    
},複製程式碼

// 點選該按鈕觸發父子元件的資料同步
<div class="share-btn" @click="confirm">確定</div>

// 接收父元件傳遞的value值
// 注意，這種實現方法，這裡只能使用value屬性名
props: {            
    value: {                
        type: Boolean,                
        default: false            
    }        
},
methods: {            
    confirm () {                
        // 雙向資料繫結父元件:value對應的值 
        // 通過$emit觸發父元件input事件，第二個引數為傳遞給父元件的值，這裡傳遞了一個false值 
        // 可以理解為最上面展示的@input="msg = $event.target.value"這個事件
        // 即觸發父元件的input事件，並將傳遞的值‘false’賦值給msg             
        this.$emit('input', false)            
    }        
}複製程式碼

<div class="share-btn" @click="confirm">確定</div>

// model選項用來避免衝突
// prop屬性用來指定props屬性中的哪個值用來接收父元件v-model傳遞的值
// 例如這裡用props中的show來接收父元件傳遞的v-model值
// event：為了方便理解，可以簡單理解為父元件@input的別名，從而避免衝突
// event的值對應了你emit時要提交的事件名，你可以叫aa，也可以叫bb，但是要命名要有意義哦！！！
model: {            
    prop: 'show',            
    event: 'changed'        
},
props: {
    // 由於model選項中的prop屬性指定了，所以show接收的是父元件v-model傳遞的值            
    show: {                
        type: Boolean,                
        default: false            
    }        
},        
methods: {            
    confirm () {                
        // 雙向資料繫結父元件傳遞的值
        // 第一個引數，對應model選項的event的值，你可以叫aa，bbb，ccc，起名隨你 
        this.$emit('changed', false)            
    }        
}複製程式碼

<div class="share-btn" @click="changeMsg">改變msg值</div>

props: {            
    oneprop: {                
        type: String,                
        default: 'hello world'
    }        
},        
methods: {            
    changeMsg () {                
        // 雙向資料流
        this.$emit('update:msg', 'helow world')           
    }        
}        複製程式碼

created() {            
    const msg = this.$attrs.msg; // 獲取父元件傳遞的msg
    this.$listeners.confirm && this.$listeners.confirm(); //若元件傳遞事件confirm則執行
},複製程式碼

import Vue from 'vue'
import Router from 'vue-router'

// 公共頁面的路由檔案
import PUBLIC from './modules/public' 
// 投票模組的路由檔案
import VOTE from './modules/vote' 

Vue.use(Router)

// 定義路由
const router = new Router({  
    mode: 'history',  
    routes: [    
        ...PUBLIC,    
        ...VOTE,  
    ]
})

// 路由變化時
router.beforeEach((to, from, next) => {    
    if (document.title !== to.meta.title) {        
        document.title = to.meta.title;    
    }    
    next()
})

// 匯出
export default router複製程式碼

/** 
 * 投票模組的router列表  
 */

export default [    
    // 投票模組首頁    
    {        
        path: '/vote/index',        
        name: 'VoteIndex',        
        component: resolve => require(['@/view/vote/index'], resolve),        
        meta: {            
            title: '投票'        
        }    
    },    
    // 詳情頁    {        
    path: '/vote/detail',        
    name: 'VoteDetail',        
    component: resolve => require(['@/view/vote/detail'], resolve),
    meta: {            
        title: '投票詳情'        
    }    
}] 複製程式碼

import { u_fixed } from './tool'

const mixins = {    
    filters: {        
        // 保留兩位小數        
        mixin_fixed2 (val) {            
            return u_fixed(val)        
        },
        // 數字轉漢字，16000 => 1.60萬        
        mixin_num2chinese (val) {            
            return val > 9999 ? u_fixed(val/10000) + '萬' : val;        
    }    
}}
export default mixins複製程式碼