[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'
}
~~~
