去哪儿app移动端项目细节点总结

一 .使用了keep-alive 会放入缓存 跳转页面 不会再重新发起请求
解决方案：
1.exclude: 组件名 例如
<keep-alive exclude="detail"> <router-view/> </keep-alive>
2.activated钩子函数中重新加载一次

二。在路由的index.js中设置 scrollBehavior 滚动行为
路由之间切换是总是回到最顶部 页面之间不会相互影响

  scrollBehavior(to,from,savedPosition){
    return{
      x:0,
      y:0
    }
  }

三. 单文件组件中 export default {
name : ‘xxx’
}
name的用处：
1.递归组件 在组件内部使用自身组件
2.kee-alive 用包括和不包括(include / exclude)
3.vue-dev-tools中显示的就是每个组件的名称

四.vue 过渡动画效果

<template>
  <transition >
  //如果给transiton写个name='fade' 下面的样式就变成了 .fade-enter...
  // 没写name 使用.v-enter..
    <slot></slot> //插槽
  </transition>
</template>

<script>
    export default {
        name: "fade"
    }
</script>

<style lang="stylus" scoped>
.v-enter, .v-leave-to
  opacity 0
.v-enter-active,.v-leave-active
  transition: opacity .5s

</style>

需要使用这个动画效果的就将该组件引入 注册完成后包裹需要使用动画的元素
比如
<fade><div>代码块</div></fade>

五.前后端联调
当后端提供数据接口时 只要修改config/index.js下面的proxyTable 转发机制

六.通过电脑内网运行项目
首先查看内网地址 windows系统ipconfig/all ipv4后面为地址

内网地址：端口号 默认是不能访问项目的 但是可以在package,json里面修改配置项 加上–host 0.0.0.0即可 但是修改了配置文件 需要重启 完成后就可以通过内网地址和端口号访问了

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

真机测试 需要在统一局域网内
真机测试的时候有的手机浏览器版本较低 不支持es6新语法 会出现白屏
npm install --save babel-polyfill
import ‘babel-polyfill’
打包上线的时候 npm run build 生成dist文件夹 将dist文件中中的sttatic 和index.html放到后台服务器的根路径上 访问根路径地址就能打开项目

异步组件在app.js特别大时候使用 至少超过1mb
使用方法 component: ()=> import('xxx ') 实现按需加载
此时network发起网络请求可能就跟下图类似了

七 Animatie.css
下载 引入 具体样式名查看animate.css官网

<transition
  enter-active-class="animated css样式名"
  leave-active-class="animated css样式名"
 >
 ></transition>

当过渡和animate.css一起使用时 type定义以那种形式的时长为准

自定义动画时长10s

还可以设置入场和出场 时长