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 運行項目即可！