在初次用vue2.0的使用遇到好多问题，慢慢爬，分享给大家，说得不好大家勿喷哈！
1，在做项目的时候，每次返回，数据都会重新请求加载。用户体验非常差，数据3秒后才出现，用户体验非常差啊！
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
具体代码：
<keep-alive>
<router-view></router-view>
</keep-alive>
如果过上面方法还不ok？
尝试利用路由的meta属性中 keepAlive=true时页面的状态保存，其他情况下不保存状态。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
然后就是给我们路由设置keepAlive属性值，比如我是给主页（列表页）的路由设置了keepAlive=true。
export default new Router({
routes: [
{
path: '',
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: Index,
meta: {
title: '首页',
keepAlive: true
}
}
]
})
vue是单页面，又想弄顶部标题？？
第一种方法： 利用 document.title="首页"，不失为一个方法，确实可以自定义顶部标题，只需要在.vue文件加上这句
但是还是有缺陷，但是在手机响应不太好。
第二种方法： 1，在router js内自定义meta属性， title: '主页'
meta: {
title: '首页'
}
在main.js内监听路由变化，配合使用：
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
if(to)
next();
})
2，在跳转二级页面时候，监控路由变换，使底部导航不出现 并且 二级页面滚动到顶部
<m-footer v-if="footerShow"></m-footer>
data内footerShow默认为true
watch:{
$route(now,old){ //监控路由变换
if(now.path=="/index"){
this.footerShow=true;
} else{
this.footerShow=false;
}
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
},
3.vue 首屏加载慢，有没啥解决方案？
拆分多个chunk加载，用vue-router中的路由懒加载。最后打包，文件大小也会变小。
参考官网：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
4.vue在进入首屏时候，除了加载慢还有一个问题：页面先加载的demo结构，在填充数据，这样体验不是很佳
5.vue样式锁定？
使用scoped，样式锁定，不串乱，模块组件之间样式互相不影响。
<style scoped lang="less">
@import './../common/css/productList.less';
</style>
6.vue打包后出现一些map文件，如何去掉？去掉好处作用？
解决办法：src/config/index.js中改一个参数：
productionSourceMap:false
这个改为false后，在最终打包的文件中没有map文件
map文件的作用：简单说就是 解除加密，因为项目打包后，代码都是经过压缩混淆的，这样就不利于调试
生成.map的文件，当你 F12 调试代码时，浏览器会去加载.map文件，如果运行时报错，有了map就像未加密的代码一样，准确的输出是哪行哪列有错误！！
7.项目在PC端微信浏览器打不开，其他都好好的，我就奇了怪，百思不得其解，我一直以为是es6编译问题，不支持？结果最后不是
如果你也遇到这种打不开？排查插件吧！我就是有关swiper轮播插件问题
怎么解决？ 把swiper版本由4换成3，顿时ok了，但是代码还需要改下，毕竟4与3的api不一样
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
slides(){
var swiper = new Swiper('.swiper-container', {
pagination: '.dot',
paginationClickable: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
observer: true
});
},
最后调用slides方法: this.slides();
注意：虽然使用的3版本，但是vue内你需要加上bserver: true, 不使用无法监听长度，项目轮播图是从服务器拿的数据。
npm安装的默认都是最新版本，swiper4版本在使用过程中有点问题，loop循环也是，建议还是使用3，
8. static文件夹放图片，里面的部分图片会被打包成 img文件夹 (dsit/static/img)，之后部分图片路径会失效
config/index.js 中的 assetsPublicPath 为 ./
build/utils.js 中的 ExtractTextPlugin.extract 传入参数 publicPath: '../../'
9.设置dev/build的api域名
dev关环境：config/dev.env.js 中的 新增 API:'"http://www.123.232.22：8081"'
build环境：config/prod.env.js 中的 新增 API:'"http://www.baidu.com"'
最后在mian.js内新增
axios.defaults.withCredentials = true;
axios.defaults.baseURL = process.env.API;
后续
最后，我在逛博客的时候看到一个有趣的问题：（来源：作者：muwoo）
var vm = new Vue({
el: '#example',
data: {
msg: 'begin',
},
mounted () {
this.msg = 'end'
console.log('1')
setTimeout(() => { // macroTask
console.log('3')
}, 0)
Promise.resolve().then(function () { //microTask
console.log('promise!')
})
this.$nextTick(function () {
console.log('2')
})
}
})
执行顺序是什么呢？哈哈
这个的执行顺序想必大家都知道先后打印：1、promise、2、3。
因为首先触发了this.msg = 'end'，导致触发了watcher的update，从而将更新操作callback push进入vue的事件队列。
this.$nextTick也为事件队列push进入了新的一个callback函数，他们都是通过setImmediate --> MessageChannel --> Promise --> setTimeout来定义timeFunc。而Promise.resolve().then则是microTask，所以会先去打印promise。
在支持MessageChannel和setImmediate的情况下，他们的执行顺序是优先于setTimeout的（在IE11/Edge中，setImmediate延迟可以在1ms以内，而setTimeout有最低4ms的延迟，所以setImmediate比setTimeout(0)更早执行回调函数。其次因为事件队列里，优先收入callback数组）所以会打印2，接着打印3
但是在不支持MessageChannel和setImmediate的情况下，又会通过Promise定义timeFunc,也是老版本Vue 2.4 之前的版本会优先执行promise。这种情况会导致顺序成为了：1、2、promise、3。因为this.msg必定先会触发dom更新函数，dom更新函数会先被callback收纳进入异步时间队列，其次才定义Promise.resolve().then(function () { console.log('promise!')})这样的microTask，接着定义$nextTick又会被callback收纳。我们知道队列满足先进先出的原则，所以优先去执行callback收纳的对象。
end
