项目技术栈

盒子宽高问题

我们提到垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。

keep-alive浏览器性能问题

再</router-view>标签外添加keep-alive标签会产生一个缓存不会多次发送axios请求。

activated钩子函数

每次页面加载就会产生作用可以设计数据请求
记得添加deactivated去取消全局事件的绑定比如
mounted () { window.addEventListener('scroll', this.handleScroll) },
unmounted () { window.removeEventListener('scroll', this.handleScroll) }

router把标签渲染成a标签解决方法

<router-link tag="li">

swiper

v-show之后尺寸问题
observeParents:true observe:true

Header渐变

top=document.documentElement.scrollTop这个可以计算进入顶部的距离。
opcity:0~1通过top/高度>1?1:opcity

递归组件

<div v-if="item.children" class="item-chilren"> <detail-list :list="item.children"></detail-list>
name: 'DetailList',detail-list就是自己组件的名字

Ajax动态数据获取

keep-alive exclude="添加你组件的名字就不会有该组件缓存"
递归组件会使用组件名
vue网页调试工具会有你组件名字

代码滚动影响（界面会互相影响滑动位置）

scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }加在routes数组后面

渐隐渐现

<template>
 <transition>
   <slot></slot>
 </transition>
</template>
<script>
export default {
 name: 'FadeAnimation'
}
</script>
<style lang="stylus" scoped>
 .v-enter, .v-leave-to
   opacity: 0
 .v-enter-active, .v-leave-active
   transition: opacity .5s
</style>

上线之前的调试

联调和后端端口联调，真机测试

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

添加--host 0.0.0.0就可以访问本地ipnpm install babel-polyfill --save`就可以让手机都支持promise

打包上线

npm run build

然后把dist给后端加到服务器根目录下
如果要在指定文件夹下要添加配置

//build下面
assetsPublicPath: '/文件名',

服务器渲染、vue资源、vue源码