@antdv-next/auto-import-resolver

Antdv-next Auto Import Resolver

English | 简体中文

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

特性

• 支持 Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild 等

安装

# via npm
npm i @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via yarn
yarn add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via pnpm
pnpm add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via Bun
bun add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

使用

Vite

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntdvNextResolver({ pro: true })],
    }),
  ],
})

Rollup

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({
      resolvers: [AntdvNextResolver()],
    }),
  ],
}

Webpack

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// webpack.config.js
import Components from 'unplugin-vue-components/webpack'

module.exports = {
  plugins: [
    Components({
      resolvers: [AntdvNextResolver()],
    }),
  ],
}

Rspack

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// rspack.config.js
import Components from 'unplugin-vue-components/rspack'

module.exports = {
  plugins: [
    Components({
      resolvers: [AntdvNextResolver()],
    }),
  ],
}

Vue CLI

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// vue.config.js
import Components from 'unplugin-vue-components/webpack'

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [AntdvNextResolver()],
      }),
    ],
  },
}

esbuild

import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// esbuild.config.js
import Components from 'unplugin-vue-components/esbuild'

build({
  plugins: [
    Components({
      resolvers: [AntdvNextResolver()],
    }),
  ],
})

选项

pro

自动引入 @antdv-next/pro Pro 组件，例如 a-scrollbar 和 ap-config-provider。

• 类型： boolean | { include?: FilterPattern, exclude?: FilterPattern }
• 默认值： false
• 依赖： @antdv-next/pro
• 示例：

Components({
  resolvers: [AntdvNextResolver({ pro: true })],
})

如果只需要自动引入指定的 Pro 组件，可以使用 include。exclude 的优先级高于 include，组件名可使用 Scrollbar 或 AScrollbar。

Components({
  resolvers: [
    AntdvNextResolver({
      pro: {
        include: ['Scrollbar'],
        exclude: ['AScrollbar'],
      },
    }),
  ],
})

resolveIcons

自动引入 @antdv-next/icons 图标库

• Type： boolean
• Default： false
• Example：

Components({
  resolvers: [
    AntdvNextResolver({
      resolveIcons: true,
    })
  ]
})

exclude

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

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

Components({
  resolvers: [
    AntdvNextResolver({
      exclude: ['Button'],
    }),
  ],
})