vue2.5去哪里网APP，项目总结

1.vue移动端绑定click事件失效

better-scroll 默认会阻止浏览器的原生 click 事件，需要配置click：true

this.scroll = new Bscroll(this.$refs.wrapper,{ mouseWheel: true, click: true, tap: true })

2.移动端300ms点击延迟

禁用游览器缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

使用FastClick（FastClick是一个简单易用的库，用于消除物理点击和click在移动浏览器上触发事件之间300毫秒的延迟）

import FastClick from 'fastclick'

FastClick.attach(document.body)

3.使用vue-awesome-swiper插件时，轮播组件直接显示最后一页

页面加载时，还没接收到ajax传递过来的数据，轮播组件接收到的是初始化的空数组，当获取到数据父组件传给轮播组件的时候，重新渲染数据才回去到轮播图片，通过v-if判断数组为空的时候轮播组件不被创建，当有数据过来的时候才被创建

<swiper :options="swiperOption" v-if="showSwiper">

showSwiper() {   return this.list.length   }

4.keep-alive优化，减少页面数据请求次数

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行，mounted只被加载一次

include属性是指定name对应组件被缓存，其他组件都不被缓存，exclude属性与之相反

5.函数节流

通过函数节流来提高性能，常见方法用定时器解决

6.递归组件

组件是可复用的 Vue 实例,且带有一个名字（name属性）

组件是可以在自己的模板中调用自身的，只有当它有 name 选项时才可以

模拟数据：

通过v-if判断是否有children，若条件为真则循环引用自身组件，为假则组件不再渲染

<div v-if="item.children" class="item-children" >

        <detail-list :list="item.children"></detail-list>

</div>

7.对全局事件的解绑

项目中在详情页监听scroll事件触发handleScroll方法，在首页依旧能触发，解决方法是在退出详情页的时候对事件进行解绑（利用keep-alive提供的两个生命钩子函数）

activated(){

    window.addEventListener('scroll',this.handleScroll)

},

deactivated(){

    window.removeEventListener('scroll',this.handleScroll)

},

8.滚动行为

当切换页面的时候，第二个页面会停留在第一个页面滚动的位置，解决方法：在router文件夹下的index.js配置

scrollBehavior (to, from, savedPosition) {

        return { x: 0, y: 0 }

}

这样当页面跳转的时候，页面就会滚动到最顶端

9.使用localhost能访问项目，但ip地址访问无效

需要在package.json文件中"scripts"配置项的dev属性添加上 " --host 0.0.0.0 "

"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"

10.实现icon导航区域的轮播

11.proxy代理机制

通过axios请求mock数据     axios.get("/api/index.json").then(this.getInfo);

本来是要写成/static/mock/index.json （本地地址），但是代码要上线 ，上线前改动代码是有风险 ，所以我们就得用转发机制，转发到本地的mock文件夹下，通过vue提供的proxy的代理机制（实际上是webpack-dev-server这个工具提供的 打包工具）

在config文件夹的index.js文件中的"dev"配置项（改动配置文件，项目需要重启）

 

以上是对于vue2.5去哪儿网实战项目的部分总结，如有理解或编写错误的地方，望提出！