目前移動端應該大都是用rem來做自適應佈局，下面是關於如何基於vue-cli配置的專案做移動端螢幕適配。

在命令列中輸入並執行：npm i lib-flexible --save

2.在專案入口檔案main.js中引入lib-flexible

import 'lib-flexible'

這個時候我們可以npm run dev看一下，已經有了效果。

但是這不是我們最終想要的，到這一步意味著我們還是需要根據UI效果圖將px轉成rem，這樣的計算實在是太繁瑣，之前本人的做法是通過sass寫一個方法將px轉rem，這樣一來我需要將每一個頁面、元件都引入這個sass檔案或者每一個頁面、元件都加上這一個方法，問題是解決了但是不夠優雅，好在網上的大神很多。在github上看到了

3.安裝postcss-loader、postcss-px2rem

在命令列中輸入並執行：npm install postcss-loader postcss-px2rem --save

注：我用的是cnpm是因為安裝了淘寶映象，沒有安裝淘寶映象就是npm

4.修改專案build資料夾下的vue-loader.conf.js檔案

在module.exports中加入postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]

因為是以750px的UI設計圖為標準，所以remUnit的值為75。

修改了vue-loader.conf.js檔案我們需要在終端重新輸入並執行npm run dev

最終如圖結果：