方法二. 按需引入组件样式
在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件。
Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 @vant/auto-import-resolver，两者可以配合使用。
相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。
1. 安装插件
# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
2. 配置插件
如果是基于 Rsbuild 的项目，在 rsbuild.config.js 文件中配置插件：
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
plugins: [pluginVue()],
tools: {
rspack: {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
},
},
});
如果是基于 Vite 的项目，在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
vue(),
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
};
如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：
const { VantResolver } = require('@vant/auto-import-resolver');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
// 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
AutoImport.default({
resolvers: [VantResolver()],
}),
Components.default({ resolvers: [VantResolver()] }),
],
},
};
如果是基于 webpack 的项目，在 webpack.config.js 文件中配置插件：
const { VantResolver } = require('@vant/auto-import-resolver');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = {
plugins: [
// 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
AutoImport({ resolvers: [VantResolver()] }),
Components({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
AutoImport.default({
resolvers: [VantResolver()],
}),
Components.default({ resolvers: [VantResolver()] }),
],
};
3. 使用组件和 API
完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。
unplugin-auto-import 会自动导入对应的 Vant API 以及样式。
使用提示
请避免同时使用「全量引入」和「按需引入」这两种引入方式，否则会导致代码重复、样式错乱等问题。
在使用过程中，如果你遇到组件不能导入的问题，因为 unplugin-vue-components 并不是 Vant 官方维护的插件，所以建议到 unplugin/unplugin-vue-components 仓库下反馈。
当 unplugin-vue-components 的版本号 >= 0.26.0 时，对于 webpack、vue-cli 和 rspack，你需要使用 ComponentsPlugin.default 进行注册。
@vant/auto-import-resolver 提供了一些配置项，请参考 README 文档 来了解更多。
如果是样式不生效的相关问题，你可以在 Vant 仓库下反馈。
银行哪些理财产品是复利？
嘉维研究