Vue3+Vant4 使用方式

下载

npm i vant

全局引用

import vant from 'vant'
import 'vant/lib/index.css'//引入样式
export function createApp() {
  const app = createSSRApp(App)
    app.use(vant)
  return {
    app
  }
}

页面使用（直接使用）

<van-button type="success">成功按钮</van-button>

移动端适配

npm install postcss-px-to-viewport

vite.config.js


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/], //忽略哪些文件转换
        })
      ]
    }
  },
})