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 yarn add postcss-pxtorem
2、引入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...
相关推荐
87354091 2019-12-23
oKeYue 2019-11-20
Starxder 2018-12-12
DaDomain 2019-06-27
JKjiang 2020-07-30
葉無聞 2020-06-06
发条戏子 2020-05-30
hxmilyy 2020-05-11
csm0 2020-03-05
haolt00 2020-02-23
nicepainkiller 2020-01-01
Enjoyendless 2020-01-11
赵家小少爷 2019-12-25
zuncle 2019-11-18
csdnuuu 2019-11-05
CaiKanXP 2019-11-02
绿豆饼 2019-10-20