English | 简体中文
@vant/auto-import-resolver
是 unplugin-vue-components 的一个解析器,用于实现 Vant 按需引入。
- 支持
Vite
,Webpack
,Rspack
,Vue CLI
,Rollup
,esbuild
等 - 支持自动引入组件对应的 CSS 样式
- 支持 SSR(服务端渲染)
# 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
// 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()],
}),
],
});
// 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()],
}),
],
};
// 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()],
}),
],
};
// 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()],
}),
],
};
// 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()],
}),
],
},
};
// 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()],
}),
],
});
是否自动引用组件对应的样式。
- Type:
boolean
- Default:
true
- Example:
Components({
resolvers: [
VantResolver({
// 禁用样式引用
importStyle: false,
}),
],
});
设置引用的模块类型。
- Type:
'esm' | 'cjs'
- Default:
'esm'
- Example:
Components({
resolvers: [
VantResolver({
module: 'cjs',
}),
],
});
- Type:
boolean
- Default:
undefined
此选项已废弃,请使用 module
选项来设置模块类型。