作者是个前端小白，文中若出现错误的知识望各位看官多多担待。

1、vant3引入

本文中vant3安装借用官方教程，官方地址：vant-contrib.gitee.io/vant/v3/#/z…

作者vite版本：2.6.4，vant版本：3.3.7

1.1 npm安装vant3

npm i vant@3；

1.2 yarn安装

yarn add vant@3;

1.3 安装按需引入插件（官方推荐）

npm i vite-plugin-style-import@1.2.0 -D；

1.4 vite.config.js配置插件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/index`,
        },
      ],
    }),
  ],
  proxy: {},
});

1.5 main.js配置

import { createApp } from "vue";
import App from "./App.vue";
import { Button } from "vant";
createApp(App).use(Button).mount("#app");

1.6 出现的问题及补充

按照官方的教程，配置vite-plugin-style-import后启动项目，页面会报错：__require.resolve is not a function，作者推断是插件版本问题，将vite-plugin-style-import降级后页面可正常显示，降级后再更新到最新版本页面也正常显示，具体原因作者也不太清楚，欢迎各位大佬补充。作者将vite-plugin-style-import降级到0.6.0版本，如果嫌降级再升级比较麻烦，可以使用vite-plugin-imp插件。

降级命令：npm i vite-plugin-style-import@0.6.0 -D

升级命令：npm i vite-plugin-style-import@1.4.0 -D

安装vite-plugin-imp：npm i vite-plugin-imp -D

vite.config.js配置vite-plugin-imp

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vitePluginImp from "vite-plugin-imp";
export default defineConfig({
  plugins: [
    vue(),
    vitePluginImp({
      //组件按需导入
      libList: [
        {
          libName: "vant",
          style(name) {
            return `vant/es/${name}/style/index`;
          },
        },
      ],
    }),
  ],
});

2、vant按需引入

项目中需要使用的vant组件较多时，直接在main.js文件下引入会导致main.js较为臃肿，我们可以新建一个文件夹vant，vant文件夹下新建一个index.js文件。

2.1 vant\index.js

6S3T}VZ2(8WDR2N2{@B@M.png

vant\index.js中引入vant组件并调用install方法把组件添加到app中。

// 需要使用的组件
import { Popup, Overlay } from "vant";

// 通过install方法添加到实例中
const vant = {
  install(app) {
    app.use(Popup);
    app.use(Overlay);
  },
};

export default vant;

2.2 main.js

import { createApp } from "vue";
import App from "./App.vue";
import vant from "./vant";


createApp(App)..use(vant).mount("#app");

到此为止vite中vantui按需引入成功，需要引入vantui其他组件时，直接在vant\index.js中导入，并在install方法中use即可。

vite2按需引入vant