前端Vue项目

多页应用：
优点：首屏时间快，SEO效果好（搜索引擎效果）
缺点：页面切换慢。

单页应用：
有点：页面切换快
缺点：首页时间慢，SEO差。


去哪儿项目。
解决方案：
1. 一像素边框解决方案：border.css
2. 快速点击：fastclick, 避免移动端点击300ms延时问题。
 npm install fastclick --save

 import fastClick from 'fastclick'
 fastClick.attach(document.body)

3. stylus
>npm install stylus --save
>npm install stylus-loader --save
4. 颜色变量抽取：定义varibles.styl
 $bgColor = #00bcd4
@import "../../../assets/styles/varibles.styl"
background-color: $bgColor

取别名，方便引用varibles文件。
文件webpack.base.conf.js中的 resolve--alias添加
    'styles':resolve('src/assets/styles'),
可以缩写应用路径：@import "~styles/varibles.styl"

5.iconfont字体图标的使用。
<div class="iconfont back-icon">&#xe624;</div>

6、修改了webpack的配置项，一定要重启一下。npm run dev

7、轮播图swiper（vue-awesome-swiper）
 npm install vue-awesome-swiper@2.6.7 --save

8、0.06rem 对应的是三像素
 rem 解决手机上，像素显示异常问题。

9、axios 进行ajax请求
 npm install axios --save

10、better-scroll
 npm install better-scroll --save

11.Vuex
 npm install vuex --save
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)

12. keep-alive 某些页面，需要刷新的操作。
 a: <keep-alive exclude="Detail">
 b: 使用新增的钩子函数activated，判断城市是否发生了变化。
  变化了，重新请求数据；未变化，不重新请求数据。


13. 组件name属性的用途
-递归组件的时候使用
-相对某个页面取消缓存的时候，使用exclude
-开发工具Vue中，显示的组件名字为定义的name

14. mock数据模拟
使用config/index.js中的proxyTable属性，添加pathRewrite。

15. 手机访问浏览器不支持promise
> npm install babel-polyfill --save
在main.js中  import 'babel-polyfill'

16. 打包
> npm run build

17. 异步组件的使用 index.js中
component: () => import('./../pages/home/Home')