1.安裝lib-flexible
npm i lib-flexible --save
2.在項(xiàng)目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.在項(xiàng)目根目錄的index.html 頭部加入手機(jī)端適配的meta的代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安裝px2rem-loader
npm i px2rem-loader -D
在實(shí)際的開發(fā)中居砖，使用flexible插件時(shí) 會(huì)自動(dòng)把px轉(zhuǎn)換成rem單位延窜。在vue-cli中安裝過(guò)lib-flexible之后 ，將px轉(zhuǎn)換成rem昼激，我們將使用px2rem這個(gè)工具， 它有webpack的loader： https://github.com/Jinjiang/px2rem-loader （這是px2rem-loader的github地址）
5.配置px2rem-loader
在vue-cli生成的webpack 配置中疗杉，vue-loader 的options和其他樣式文件loader 最終都是由build/untils.js里的一個(gè)方法生成的尽狠。
我們只需要在cssLoader后面加上一個(gè)px2remLoader即可，px2rem-loader的remUnit 選項(xiàng)意思是1rem=多少像素黑忱，結(jié)合lib-flexible宴抚，我們將px2remLoader的option.remUnit 設(shè)置成設(shè)計(jì)稿寬度的1/10，這里我們假設(shè)設(shè)計(jì)稿的寬度為750px ,并將px2remLoader 放進(jìn)loaders數(shù)組中
fdc5fd1cb7405c439c3265c4a9c84fd3.png
