vue使用rem布局

1、vue_cli3.0 rem 使用

安装amfe-flexible插件 在mian.js里引入

npm i amfe-flexible
import 'amfe-flexible'

安装postcss-px2rem插件

npm i postcss-px2rem

在package.json中配置

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 50
      }
    }
  }

备注：remUnit:50 此处50由设计稿尺寸决定 当设计稿为375px,打开网页进入调试模式将网页宽度调整至与设计稿相同，得到的html的font-size即为所需要的设置的值

使用：

在vue组件中直接设置css样式使用px单位即可，如果不需要自动转换则在后面加上/*no*/

<style scoped>
.test {
    width:20px;
    height:40px;/*no*/
}
</style>