vue3移动端使用Vant、rem安装使用详细过程以及vite这种方式的使用过程

1、首先安装：

npm i vant
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

2、在main.js中做如下内容：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入下边三个并将vant 挂载到app上
import Vant from 'vant'
import 'vant/lib/index.css'
import 'amfe-flexible'

createApp(App).use(store).use(Vant).use(router).mount('#app')

3、在vue.config.js中做如下配置：

// const { postCssPxToRem } = require('postcss-pxtorem')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({ // 把px单位换算成rem单位
              // rootValue: 37.5, // vant官方使用的是37.5
              rootValue ({ file }) {
                // 如果是 Vant 的样式就按照 37.5 处理转换
                // 如果是我们自己的样式就按照 75 处理转换
                return file.indexOf('vant') !== -1 ? 37.5 : 75
                // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
                // 多少就直接写多少即可，不用除以2了
              },
              // selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
              propList: ['*']
            })
          ]
        }
      }
    }
  }
})

4、在app.vue中使用：

<template>
  <div class="my-test"></div>
  <van-button type="primary">主要按钮</van-button>
</template>

<style lang="less">
.my-test{
  //width: 750px;
  width: 375px; // 750px的设计图是多少这就写多少
  height: 40px;
  background-color: pink;
}

</style>

效果如下：

vite 的使用方法和上边步骤大致相同，不同的是vue.config.js和vite.config.js这部分，vite.config.js的内容如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import postCssPxToRem from "postcss-pxtorem"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    // postcss: {
    //   plugins: [
    //     postCssPxToRem({
    //       // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
    //       rootValue ({ file }) {
    //         // 如果是 Vant 的样式就按照 37.5 处理转换
    //         // 如果是我们自己的样式就按照 75 处理转换
    //         // console.log(file)
    //         return file.indexOf('vant') !== -1 ? 37.5 : 75
    //         // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
    //         // 多少就直接写多少即可，不用除以2了
    //       },
    //       propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
    //     })
    //   ]
    // },
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/mixin.less";',
      },
    },

    // 加上下边这部分 和最上边的导包，验证了一下，下边这部分在上边也没问题，即没有先后顺序
    postcss: {
      plugins: [
        postCssPxToRem({
          // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
          rootValue ({ file }) {
            // 如果是 Vant 的样式就按照 37.5 处理转换
            // 如果是我们自己的样式就按照 75 处理转换
            // console.log(file)
            return file.indexOf('vant') !== -1 ? 37.5 : 75
            // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
            // 多少就直接写多少即可，不用除以2了
          },
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    },
  },

})

其实就是在js中添加这么一丢丢

import postCssPxToRem from "postcss-pxtorem"

 // 加上下边这部分 和最上边的导包，验证了一下，下边这部分在上边也没问题，即没有先后顺序
postcss: {
  plugins: [
    postCssPxToRem({
      // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
      rootValue ({ file }) {
        // 如果是 Vant 的样式就按照 37.5 处理转换
        // 如果是我们自己的样式就按照 75 处理转换
        // console.log(file)
        return file.indexOf('vant') !== -1 ? 37.5 : 75
        // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
        // 多少就直接写多少即可，不用除以2了
      },
      propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
    })
  ]
},

结果如下：