Vant Auto Import Resolver

English | 简体中文

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

$3

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

$3

``shell


via npm

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via yarn

yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via pnpm

pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via Bun

bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
`

使用

$3

`ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
});
`

$3

`ts
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
};
`

$3

`ts
// webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';

module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
};
`

$3

`ts
// rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

module.exports = {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
};
`

$3

`ts
// vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';

module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
},
};
`

$3

`ts
// esbuild.config.js
import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver';

build({
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
});
`

选项

$3

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

- Type： boolean
- Default： true
- Example：

`ts
Components({
resolvers: [
VantResolver({
// 禁用样式引用
importStyle: false,
}),
],
});
`

$3

设置引用的模块类型。

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

`ts
Components({
resolvers: [
VantResolver({
module: 'cjs',
}),
],
});
`

$3

- Type： boolean
- Default： undefined

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

$3

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

- Type： string[]
- Default： []
- Example：

`ts
Components({
resolvers: [
VantResolver({
exclude: ['Button'],
}),
],
});
`

`ts
AutoImport({
resolvers: [
VantResolver({
exclude: ['showToast'],
}),
],
});
``