cli3 px转rem适配移动端_vue-cli3.0 移动端px转rem以及vue-cli3.0搭建等

网上说的较多的是postcss-pxtorem和postcss-px2rem(postcss-pxtorem配置项介绍https://segmentfault.com/a/11...)

这里我采用了postcss-pxtorem，我是用的yarn安装,速度还是比较快的，以前用npm有时候要等很久。

1、安装依赖包

yarn add lib-flexible --dev

yarn add postcss-pxtorem --dev

2、main.js中引入lib-flexible

import "lib-flexible/flexible.js"

3、配置postcss-pxtorem

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中(新构建的项目可能会找不到，需要手动在项目根目录创建vue.config.js)

module.exports = {

css: {

loaderOptions: {

postcss: {

plugins: [

// 把px单位换算成rem单位

require("postcss-pxtorem")({

rootValue: 75, // 换算的基数(设计图750的根字体为32)

selectorBlackList: [".van"],// 要忽略的选择器并保留为px。

propList: ["*"], //可以从px更改为rem的属性。

minPixelValue: 2 // 设置要替换的最小像素值。

})

]

}

}

}

}

4、创建vue.config.js

在项目根目录下新建vue.config.js文件与package.json同级

请参考https://blog.csdn.net/u014440483/article/details/87267160(我是看这篇文章的)

5、vue-cli3.0环境搭建(找了一篇文章，和我之前看着搭建的差不多，只是我用的是yarn，最后的npm run serve改为yarn serve就好了)https://blog.csdn.net/qq_4185...