vue使用过程中的一些问题解决

1.接口跨域问题

本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题，解决方案如下
vue.config.js

module.exports = {
  publicPath: "./",
  lintOnSave: false,
  productionSourceMap: false, //避免打包出现.map文件dao导致体积过大
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/styles/_var.scss";'
      }
    }
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'https://xxxxxxxxxxxx', //接口
        pathRewrite: {
          ['^/api']: ''
        }
      }
    },
    port: 8083 // 项目启动端口
  }
};

注意：配置好后一定要关闭原来的server，重新启动项目。不然无效。再请求接口的时候就是localhost:8083/api

2.定时器问题

我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。

解决方法1

首先我在data函数里面进行定义定时器名称：

data() {
    return {
        timer: null  // 定时器名称
    }
},

然后这样使用定时器：

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

最后在beforeDestroy()生命周期内清除定时器：

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

方案1有两点不好的地方，引用尤大的话来说就是：
它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。
这并不算严重的问题，但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

解决方案2

该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码：

const timer = setInterval(() =>{
    // 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})

类似于其他需要在当前页面使用，离开需要销毁的组件（例如一些第三方库的picker组件等等），都可以使用此方式来解决离开后以后在背后运行的问题。综合来说，我们更推荐使用方案2，使得代码可读性更强，一目了然。

3.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的路径根据你的文件路径去填写。

4.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文档，更多用法，请参考文档说明。https://www.npmjs.com/package/vue-awesome-swiper

5.fastClick的300ms延迟解决方案

开发移动端项目，点击事件会有300ms延迟的问题。至于为什么会有这个问题，请自行百度即可。这里只说下常见的解决思路，不管vue项目还是jq项目，都可以使用fastClick解决。

cnpm install fastclick -S

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

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

未完待续。。。。。。。。。。。。。。。。。。。。