Vue3+vant的px转换rem方法

rem 相关配置

1.安装三个插件

• 这我们使用自动将 px 单位转化为 rem 单位的插件

• 安装命令 npm install postcss --save-dev npm install postcss-pxtorem@5.1.1 --save-dev 可以将 px 单位自动转化为 rem 单位

注：--save-dev 是安装在开发环境下 项目打包的时候 不会被打包进 dist 文件夹 --save 的意思是安装在 生产环境下 项目打包的时候 会被打包进 dist 文件夹

• 还需要安装 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: ["*"],
      },
    },
  };