vue开发总结（一）

vue使用快一个多月了，从移动端到PC端，踩过的坑也不少。项目的开发是基于element ui 与 mint ui 组件库，下面总结下项目中的一些知识点：

一、网页数据请求

首次进入页面，需要请求数据渲染页面。将相应的异步请求方法写在created  这个钩子中，在渲染前会发起请求；mouted 是页面数据发生变化的时候出发这个钩子

二、页面的缓存问题

由于页面请求，所以每次进入页面都需要请求，用户体验不是很好，在页面跳转的便签外套取一层<keep-alive>

     <keep-alive><router-view></router-view></keep-alive>

这样就会实现页面的缓存，如果刷新浏览器，会实现再次发起请求。

三、页面数据的渲染

页面数据的渲染，用的最多的就是v-for  这个指令了，遍历后台返回的数据，渲染到页面中。在遍历中，需要用到 :class  (选择样式，对于不同的元素)  @mouseover  @mouseleave  (实现鼠标移入移出的效果)，用data 中的数据控制v-show  的显示，后台返回的段落信息用<p v-html="" />。特别值得注意的是v-if  与v-show 的区别。

四、vue的路由

vue的路由中的参数，比如ID传过来的3，一般$router.query.name  获取的是number类型，页面再次刷新后，用$router.query.name再次获取的是字符串，需要做相应的转换。vue手机端的页面最好是自己写tabbar,避免返回时候的问题，每一个选项还是用单页面的比较好。

五、vue的监听

vue中的监听watch 功能，对于新闻页面以及而三级页面，这个在本页面点击后，路由的id改变，数据重新渲染是非常重要的。

六、vue中键盘绑定事件

PS： 不能写成document.onkeydown = this.XX()  ， 这样会绑定不成功。

七、webpack 打包第三方插件分离

在开发环境中，npm install xx --save   相关的第三方插件还是以这种方式安装；

在生产环境中，因打包的需要，需要在入口文件，index.html  用便签引入相关的js  与css

然后在 webpack.base.conf.js  添加以下这行代码：

然后再进行打包，mint-ui  就不会被webpack  打包，而是通过外部去引用，提高了网页首次加载的速度。可以比对下dist文件夹中js的大小。

PS： 严格模式下需要加入window ，需要注意的是 在html 中引入相关js 的时候，先在控制台window 中打印下，找到相关的js,比如‘mint-ui’ 引入以后在window 下是MINT ，如果还是写成‘mint-ui’，就回报错  ‘mint-ui’ is not defined

八、防止css 污染全局

加上这个就可以了！

九、webpack打包，背景图片不显示的问题

解决方法： 需要在build文件夹下的utils.js 中，加下如下代码