Vue-cli webpack實現移動端rem自動化，自適應任何設備

1 安裝vue-cli略

2 sass和postcss-px2rem

第一步 ：安裝

sass 部分
cnpm install sass-loader --save-D
cnpm install node-sass --save-D
postcss-px2rem 部分
cnpm install postcss-px2rem --save-D

第二步 ： webpack.dev.conf.js和webpack.prod.conf.js下的plugins添加一個東西，你們必定要注意remUnit這個屬性，就是在蘋果5狀況下爲40px，我這裏定爲40，也有人定爲80，我這裏40是爲了配合hotcss使用下面我會講到

plugins: [
    new webpack.LoaderOptionsPlugin({
      // webpack 2.0以後， 此配置不能直接寫在自定義配置項中， 必須寫在此處
      vue: {
        postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
      }
    }
  ]

到這裏爲止安裝就完成了
輸入font-size:40px
輸出font-size:1rem (在iphone5下)

3 咱們都知道設備的像素比不同的，因此咱們用hotcss來調整設備的像素比 連接

我放在了src/assets/js/裏面你們可根據習慣來
在webpack.base.conf.js下
引入方法，本身定義什麼名字都行，這裏我吧hotcss.js改成了viewport.js

module.exports = {
  entry: {
    app: './src/main.js',
    rem: './src/assets/js/viewport.js'
  }
}

這樣就大功告成啦