vue3引入vant组件库并进行rem适配方案

1.安装vant3组件库

npm i vant

2.如果需要使用 rem 单位进行适配,官方推荐使用以下两个工具:

npm i postcss-pxtorem lib-flexible

3.在main.js中引入(千万别忘记)

// 移动端适配
import 'lib-flexible/flexible.js'

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: ["*"],
      },
    },
  };
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值