[TOC]
## 1. 使用vant 移动ui框架
网上有教程，需要注意的是使用babel-plugin-import的时候：
在配置`babelrc` 时，有两个`plugins`,而我们需要把`vant` 配置在第一个上；
****
## 2. 如何使用px 并且自适应
1.
~~~
npm i lib-flexible --save
~~~
2. 在项目入口文件 `main.js` 里 引入`lib-flexible`
~~~
// main.js
import 'lib-flexible'
~~~
3. px 转rem
~~~
npm i px2rem-loader --save-dev
~~~
4. 配置css-loader
~~~
// bulid/utils.js
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// 并加入数组中
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
~~~
****
## 3. 使用vue-cli 如何在本地调试接口：
例子：[生产环境地址www.baidi.com:8080/aa/bb：](http://xn--www-sl9d730b0c70i6z6guyc.baidi.com:8080/aa/bb%EF%BC%9A)
在开发时，`proxyTable`的配置应该为：
注意：下面的`aa`不是随便起的名字，必须为`aa`：
~~~
// config index.js
proxyTable: {
'/aa': {
target: 'http://www.baidi.com:8080/aa', // 通过本地服务器将你的请求转发到这个地址
changeOrigin: true, // 设置这个参数可以避免跨域
pathRewrite: {
'^/aa': ''
}
}
},
~~~
项目中请求的地址应该为 axios.get('/aa/bb'),代理解析时会在aa前面加上[www.baidi.com:8080/aa"变成了"www.baidi.com:8080/aa/aa/bb](www.baidi.com:8080/aa"变成了"www.baidi.com:8080/aa/aa/bb)
但是由于配置中的pathRewrite把aa（第二个aa）改为空字符串，所以请求地址变为[www.baidi.com:8080/aa/bb](www.baidi.com:8080/aa/bb)
在项目打包上线时，代码里的请求地址不需要改动，下面我来说为什么，
线上代码运行时，碰到`axios.get('/aa/bb')`请求，因为在aa的前面有个"/",表示根目录的意思，
所以"`/aa/bb`"会被解析为`hostname+port+"aa/bb`",所以请求地址就为[www.baidi.com:8080/aa/bb](www.baidi.com:8080/aa/bb)
****
## vue-jsonp
使用`vue-jsonp` 来跨域时需要注意的是，请求接口返回的数据直接是json对象是会报错的：
jsonp需要返回的是一个js脚本。所以使用`jsonp`来跨域请求一个json对象是需要后端配合的。
## keep-alive
keep-alive用户组件缓存，在vue-2.1之后可以使用`include`和`exclude`来缓存某个特定的组件，结合`vue-router` 可以这么使用
~~~
// App.vue
<keep-alive include="home">
<router-view />
</keep-alive>
~~~
**注意：**这里`include`的`name` 并不是`router`里面的`name` 而是组件的`name`
~~~
// home.vue
export default {
name: 'home'
}
~~~
