1.安装vant3组件库
npm i vant
1
2.如果需要使用 rem 单位进行适配,官方推荐使用以下两个工具:
npm i postcss-pxtorem lib-flexible
1
3.在main.js中引入(千万别忘记)
// 移动端适配
import 'lib-flexible/flexible.js'
1
2
4.新建postcss.config.js文件配置
// postcss.config.js
const { sep } = require("path");
module.exports = ({ file }) => {
const rootValue =
file.dirname.indexOf(`node_modules${sep}vant`) !== -1 ? 37.5 : 75;
return {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue,
propList: ["*"],
},
},
};
};
或者
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};