Vue3+vant4适配移动端

npm install vant

import vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)
app.use(vant).mount('#app')

  <van-button type="primary" />

:root {
    --van-primary-color: blue;
    --van-success-color: green;
    --van-danger-color: red;
    --van-warning-color: orange;
}

import vant from 'vant'
import 'vant/lib/index.css'
import './assets/style/vant-theme.css'

npm install postcss-px-to-viewport

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          // 更多配置参考：https://github.com/evrone/postcss-px-to-viewport
          viewportWidth: 750, // 设计稿宽度
          unitPrecision: 2, // 保留小数点后2位
          exclude: [/node_modules/], //忽略哪些文件转换
        })
      ]
    }
  },
})

https://github.com/skywalk94/vite-demo/tree/vant4