以vue3+pinia+router+vite为例

Vue 3 项目，安装最新版 Vant npm i vant

在 vite 项目中使用 Vant 时，推荐安装 vite-plugin-style-import 插件，它可以自动按需引入组件的样式。

通过 npm 安装npm i vite-plugin-style-import@1.4.1 -D

安装完成后，在 vite.config.js 文件中配置插件

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import'

// 具体代码
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()]
    })
  ]
})

然后回到我们的main.js,这里注意,复制你所需要的代码,其中的pinia和router忽略掉就好

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from './router/index'
let pinia = createPinia()

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

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

回到页面代码

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

改了配置需要重启项目,然后你发现能用了!