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'
  }
}

这样就大功告成啦