1.接口跨域問(wèn)題

本地開(kāi)發(fā)項(xiàng)目請(qǐng)求服務(wù)器接口的時(shí)候，因?yàn)榭蛻?hù)端的同源策略，導(dǎo)致了跨域的問(wèn)題，解決方案如下
vue.config.js

module.exports = {
  publicPath: "./",
  lintOnSave: false,
  productionSourceMap: false, //避免打包出現(xiàn).map文件dao導(dǎo)致體積過(guò)大
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/styles/_var.scss";'
      }
    }
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'https://xxxxxxxxxxxx', //接口
        pathRewrite: {
          ['^/api']: ''
        }
      }
    },
    port: 8083 // 項(xiàng)目啟動(dòng)端口
  }
};

注意：配置好后一定要關(guān)閉原來(lái)的server，重新啟動(dòng)項(xiàng)目。不然無(wú)效。再請(qǐng)求接口的時(shí)候就是localhost:8083/api

2.定時(shí)器問(wèn)題

我在a頁(yè)面寫(xiě)一個(gè)定時(shí)，讓他每秒鐘打印一個(gè)1，然后跳轉(zhuǎn)到b頁(yè)面，此時(shí)可以看到，定時(shí)器依然在執(zhí)行。這樣是非常消耗性能的。

解決方法1

首先我在data函數(shù)里面進(jìn)行定義定時(shí)器名稱(chēng)：

data() {
    return {
        timer: null  // 定時(shí)器名稱(chēng)
    }
},

然后這樣使用定時(shí)器：

this.timer = (() => {
    // 某些操作
}, 1000)

最后在beforeDestroy()生命周期內(nèi)清除定時(shí)器：

beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
}

方案1有兩點(diǎn)不好的地方，引用尤大的話(huà)來(lái)說(shuō)就是：
它需要在這個(gè)組件實(shí)例中保存這個(gè) timer，如果可以的話(huà)最好只有生命周期鉤子可以訪(fǎng)問(wèn)到它。
這并不算嚴(yán)重的問(wèn)題，但是它可以被視為雜物。
我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。

解決方案2

該方法是通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器。以下是完整代碼：

const timer = setInterval(() =>{
    // 某些定時(shí)器操作
}, 500);
// 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})

類(lèi)似于其他需要在當(dāng)前頁(yè)面使用，離開(kāi)需要銷(xiāo)毀的組件（例如一些第三方庫(kù)的picker組件等等），都可以使用此方式來(lái)解決離開(kāi)后以后在背后運(yùn)行的問(wèn)題。綜合來(lái)說(shuō)，我們更推薦使用方案2，使得代碼可讀性更強(qiáng)，一目了然。

3.rem文件的導(dǎo)入問(wèn)題

我們?cè)谧鍪謾C(jī)端時(shí)，適配是必須要處理的一個(gè)問(wèn)題。例如，我們處理適配的方案就是通過(guò)寫(xiě)一個(gè)rem.js，原理很簡(jiǎn)單，就是根據(jù)網(wǎng)頁(yè)尺寸計(jì)算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);

這里說(shuō)下怎么引入的問(wèn)題，很簡(jiǎn)單。在main.js中，直接import './config/rem'導(dǎo)入即可。import的路徑根據(jù)你的文件路徑去填寫(xiě)。

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

在我們使用的很多ui庫(kù)（vant、antiUi、elementUi等）中，都有輪播組件，對(duì)于普通的輪播效果足夠了。但是，某些時(shí)候，我們的輪播效果可能比較炫，這時(shí)候ui庫(kù)中的輪播可能就有些力不從心了。當(dāng)然，如果技術(shù)和時(shí)間上都還可以的話(huà)，可以自己造個(gè)比較炫的輪子.這里我說(shuō)一下vue-awesome-swiper這個(gè)輪播組件，真的非常強(qiáng)大，基本可以滿(mǎn)足我們的輪播需求。swiper相信很多人都用過(guò)，很好用，也很方便我們二次開(kāi)發(fā)，定制我們需要的輪播效果。vue-awesome-swiper組件實(shí)質(zhì)上基于swiper的，或者說(shuō)就是能在vue中跑的swiper。下面說(shuō)下怎么使用：
安裝 cnpm install vue-awesome-swiper --save
在組件中使用的方法，全局使用意義不大

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

// 在components中注冊(cè)組件
components: {
    swiper,
    swiperSlide
}

// template中使用輪播
// ref是當(dāng)前輪播
// callback是回調(diào)
// 更多參數(shù)用法，請(qǐng)參考文檔
<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>
// 參數(shù)要寫(xiě)在data中
data() {
    return {
        // swiper輪播的參數(shù)
        swiperOption: {
            // 滾動(dòng)條
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            // 上一張，下一張
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 其他參數(shù)…………
        }
    }
},

swiper需要配置哪些功能需求，自己根據(jù)文檔進(jìn)行增加或者刪減。
附上文檔：npm文檔，swiper3.0/4.0文檔，更多用法，請(qǐng)參考文檔說(shuō)明。https://www.npmjs.com/package/vue-awesome-swiper

5.fastClick的300ms延遲解決方案

開(kāi)發(fā)移動(dòng)端項(xiàng)目，點(diǎn)擊事件會(huì)有300ms延遲的問(wèn)題。至于為什么會(huì)有這個(gè)問(wèn)題，請(qǐng)自行百度即可。這里只說(shuō)下常見(jiàn)的解決思路，不管vue項(xiàng)目還是jq項(xiàng)目，都可以使用fastClick解決。

cnpm install fastclick -S

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

import FastClick from 'fastclick'; // 引入插件
FastClick.attach(document.body); // 使用 fastclick

未完待續(xù)。。。。。。。。。。。。。。。。。。。。