Vant Auto Import Resolver

English | 简体中文

@vant/auto-import-resolver 是 unplugin-vue-components 的一个解析器，用于实现 Vant 按需引入。

特性

• 支持 Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild 等
• 支持自动引入组件对应的 CSS 样式
• 支持 SSR（服务端渲染）

安装

1# via npm
2npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
3
4# via yarn
5yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
6
7# via pnpm
8pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
9
10# via Bun
11bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

使用

Vite

1// vite.config.ts
2import AutoImport from 'unplugin-auto-import/vite';
3import Components from 'unplugin-vue-components/vite';
4import { VantResolver } from '@vant/auto-import-resolver';
5
6export default defineConfig({
7  plugins: [
8    AutoImport({
9      resolvers: [VantResolver()],
10    }),
11    Components({
12      resolvers: [VantResolver()],
13    }),
14  ],
15});

Rollup

1// rollup.config.js
2import AutoImport from 'unplugin-auto-import/rollup';
3import Components from 'unplugin-vue-components/rollup';
4import { VantResolver } from '@vant/auto-import-resolver';
5
6export default {
7  plugins: [
8    AutoImport({
9      resolvers: [VantResolver()],
10    }),
11    Components({
12      resolvers: [VantResolver()],
13    }),
14  ],
15};

Webpack

1// webpack.config.js
2import AutoImport from 'unplugin-auto-import/webpack';
3import Components from 'unplugin-vue-components/webpack';
4import { VantResolver } from '@vant/auto-import-resolver';
5
6module.exports = {
7  plugins: [
8    AutoImport({
9      resolvers: [VantResolver()],
10    }),
11    Components({
12      resolvers: [VantResolver()],
13    }),
14  ],
15};

Rspack

1// rspack.config.js
2import AutoImport from 'unplugin-auto-import/rspack';
3import Components from 'unplugin-vue-components/rspack';
4import { VantResolver } from '@vant/auto-import-resolver';
5
6module.exports = {
7  plugins: [
8    AutoImport({
9      resolvers: [VantResolver()],
10    }),
11    Components({
12      resolvers: [VantResolver()],
13    }),
14  ],
15};

Vue CLI

1// vue.config.js
2import AutoImport from 'unplugin-auto-import/webpack';
3import Components from 'unplugin-vue-components/webpack';
4import { VantResolver } from '@vant/auto-import-resolver';
5
6module.exports = {
7  configureWebpack: {
8    plugins: [
9      AutoImport({
10        resolvers: [VantResolver()],
11      }),
12      Components({
13        resolvers: [VantResolver()],
14      }),
15    ],
16  },
17};

esbuild

1// esbuild.config.js
2import { build } from 'esbuild';
3import AutoImport from 'unplugin-auto-import/esbuild';
4import Components from 'unplugin-vue-components/esbuild';
5import { VantResolver } from '@vant/auto-import-resolver';
6
7build({
8  plugins: [
9    AutoImport({
10      resolvers: [VantResolver()],
11    }),
12    Components({
13      resolvers: [VantResolver()],
14    }),
15  ],
16});

选项

importStyle

是否自动引用组件对应的样式。

• Type： boolean
• Default： true
• Example：

1Components({
2  resolvers: [
3    VantResolver({
4      // 禁用样式引用
5      importStyle: false,
6    }),
7  ],
8});

module

设置引用的模块类型。

• Type： 'esm' | 'cjs'
• Default： 'esm'
• Example：

1Components({
2  resolvers: [
3    VantResolver({
4      module: 'cjs',
5    }),
6  ],
7});

ssr

• Type： boolean
• Default： undefined

此选项已废弃，请使用 module 选项来设置模块类型。

exclude

设置不自动引入的组件或 API。

• Type： string[]
• Default： []
• Example：

1Components({
2  resolvers: [
3    VantResolver({
4      exclude: ['Button'],
5    }),
6  ],
7});

1AutoImport({
2  resolvers: [
3    VantResolver({
4      exclude: ['showToast'],
5    }),
6  ],
7});