參考資料
1.基于vue-cli配置移動端自適應(yīng)
2.vue.js移動端配置flexible.js
源頭
前期弄好了vue的大概，要開始寫靜態(tài)頁面，按照正常流程，我需要些css，html腋逆，但是大家都知道，移動端頁面和電腦端不一樣侈贷，需要適配惩歉，打算直接引用flexible.js，但是實際上我還不知道怎么引用俏蛮。所以百度出了上述的參考資料撑蚌，達(dá)到我的目的。
步驟
第一嫁蛇，配置 flexible
安裝lib-flexible --在命令行中運(yùn)行如下安裝
npm install lib-flexible --save
引入lib-flexible --在命令行中安裝完成之后锨并，需要在項目中引入lib-flexible
引入地址：項目入口文件中main.js
引入方式：import 'lib-flexible'
添加meta標(biāo)簽 --在項目根目錄index.html中添加meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入lib-flexible.js后，我們就能愉快的適配啦睬棚！但是不要忘記第煮，我們在寫css的時候解幼，在看設(shè)計稿的時候，習(xí)慣是用px作為單位的包警，所以撵摆，下一步，我們需要把px轉(zhuǎn)換rem在寫入樣式中害晦。特铝。。
根據(jù)這次的百度壹瘟，我才只有有px2rem這個工具鲫剿；使用的是webpack的loader：px2rem-loader
第二，px轉(zhuǎn)rem
安裝px2rem-loader
在命令行中運(yùn)行如下安裝
npm install px2rem-loader --save-dev
配置px2rem-loader
1.配置地點：
2.配置：我們只需在 cssLoader 后再加上一個 px2remLoader 即可稻轨，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素灵莲，結(jié)合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計稿寬度的 1/10殴俱，這里我們假設(shè)設(shè)計稿寬為 750px政冻。
2-1，.importLoaders:2：參考資料中有寫线欲，但是后期我去除這個的時候沒有發(fā)現(xiàn)有什么異常明场。但是為了保險還是寫了，估計是我還沒有外部的css文件吧李丰，苦锨，，
表示在css-loader前應(yīng)用的loader的數(shù)目趴泌，默認(rèn)為0逆屡；如果不加這個，@import的外部css文件將不能正常轉(zhuǎn)換踱讨，如果還不行，試著調(diào)大數(shù)字砍的。
2-2痹筛，將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計稿寬度的 1/10，這里我們假設(shè)設(shè)計稿寬為 750px廓鞠。
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
3.放進(jìn) loaders 數(shù)組中
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
兩個px2remLoader一定要寫Ｖ愠怼！床佳！不然不起作用（親測Ｗ淘纭）
第三，檢查安裝后的變化砌们，重啟項目
1.項目中新添加的
2.目前沒有外部css文件杆麸，css樣式目前寫在頁面中：
最后
重啟項目后的前后變化
