Vite+Vue3+vite-plugin-style-import 2.0按需引入vant 4组件

首先在项目根目录执以下以命令，安装好必要的组件包：

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

# 添加按需引入插件，它的作用是在引入组件库中的组件时支持按需引入，减小打包后代码的体积
cnpm install babel-plugin-import -D

# 添加按需引入插件vite-plugin-style-import （注意这里是2.0.0版本的）
cnpm install vite-plugin-style-import -D

# 添加按需引入插件使用到的 consola 包
cnpm i consola -D

　　修改vite.config.js文件，代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [
        VantResolve()
      ],
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style` // 注意这里的路径适用于vite-plugin-style-import 2.0版本
        },
      ]
    })
  ]
})

　　最后 cnpm run dev 运行项目即可！