Vue3+Vant3 移动端适配 rem转换

1.安装三个插件

• 安装命令

npm install postcss --save-dev

npm install postcss-pxtorem@5.1.1 --save-dev

npm i amfe-flexible --save

• 要安装这三个插件才能将px转换为rem，这些插件帮我们自动实现移动端适配

2. 在main.js 中引入 amfe-flexible

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "vant"; // 整体导入vant组件库
import "vant/lib/index.css"; // 引入vant样式表
import "amfe-flexible"; //rem转化的工具
createApp(App).use(store).use(router).use(Vant).mount("#app");

3. 在项目根目录下创建一个 postcss.config.js

// 该文件项目启动后会自动运行
// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    "postcss-pxtorem": {
      rootValue({ file }) {
        // 判断是否是 vant 的文件 如果是就使用 37.5 为根节点字体大小
        // 否则使用 75 因为 vant 使用的设计标准为 375 但是市场现在的主流设置尺寸是 750
        //因为严选商城的参照图是 375 的所以也是 37.5
        return file.indexOf("vant") !== -1 ? 37.5 : 37.5;
      },
      // 配置哪些文件中的尺寸需要转化为 rem *表示所有的都要转化
      propList: ["*"],
    },
  },
};