1.安裝lib-flexible
npm i lib-flexible --save
2.在項目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.在項目根目錄的index.html 頭部加入手機端適配的meta的代碼
meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安裝px2rem-loader
在實際的開發中，使用flexible插件時 會自動把px轉換成rem單位。在vue-cli中安裝過lib-flexible之后 ，將px轉換成rem，我們將使用px2rem這個工具， 它有webpack的loader： https://github.com/Jinjiang/px2rem-loader （這是px2rem-loader的github地址）
所以我使用了 github上面的安裝命令：npm install px2rem-loader
5.配置px2rem-loader
在vue-cli生成的webpack 配置中，vue-loader 的options和其他樣式文件loader 最終都是由build/untils.js里的一個方法生成的。
我們只需要在cssLoader后面加上一個px2remLoader即可，px2rem-loader的remUnit 選項意思是1rem=多少像素，結合lib-flexible，我們將px2remLoader的option.remUnit 設置成設計稿寬度的1/10，這里我們假設設計稿的寬度為750px ,並將px2remLoader 放進loaders數組中
const px2remLoader = {
loader: "px2rem-loader",
options: {
remUnit: 40
}
};
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ?
[cssLoader, postcssLoader, px2remLoader] :
[cssLoader, px2remLoader];
6.然后重啟后 在組件中寫單位直接寫px 然后在瀏覽器中的檢查就可以看到 單位是rem
https://www.jianshu.com/p/7f2ccac59fb9 淘寶彈性布局方案lib-flexible實踐