按需使用

Apollo Design 支持通过 @apollo-design/ui-resolver 自动按需引入，也支持手动导入。组件以 ESM 模块发布，打包器可以对未使用的导出做 tree-shaking；组件样式和主题变量按下面的方式加载。

自动按需引入

使用 @apollo-design/ui-resolver 配合 unplugin-vue-components，可以根据 Vue 模板自动引入组件及其所需的结构样式。

安装

npm install @apollo-design/ui @apollo-design/theme vue
npm install -D @apollo-design/ui-resolver unplugin-vue-components

当前 resolver 支持 UI >=0.1.8 <0.2.0 和 unplugin-vue-components ^32.1.0，建议 Apollo 包使用相同发布版本。以下配置适用于已安装 vite 和 @vitejs/plugin-vue 的 Vue 项目。

配置 Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ApolloResolver } from '@apollo-design/ui-resolver';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ApolloResolver()],
      dts: 'src/components.d.ts',
    }),
  ],
});

将生成的 src/components.d.ts 纳入应用的 TypeScript 配置，例如已有的 include: ["src/**/*.ts", "src/**/*.vue"] 会包含它。

加载主题并使用组件

在应用入口加载默认主题变量：

// main.ts
import '@apollo-design/theme/tokens.css';

模板中使用 A 前缀组件，无需在 <script setup> 中手动导入：

<template>
  <ASpace>
    <AButton type="primary">保存</AButton>
    <AInputSearch placeholder="搜索" />
  </ASpace>
</template>

复合组件使用明确名称，例如 AInputSearch、AFormItem、ASpaceCompact、ALayoutSider。模板也可使用对应的 kebab-case，例如 <a-button>。

ApolloResolver() 默认按需加载组件及依赖的结构 CSS，重复样式路径由打包器去重；主题变量由应用选择和加载。此方式无需再引入 @apollo-design/ui/style.css 或同组组件的 style.css。选择 Mono、Material 等独立主题时，参照样式引入与主题配置预设。

如果项目已经全量引入样式，或希望自行管理 CSS，可关闭 resolver 的样式导入：

ApolloResolver({ importStyle: false })

关闭后仍会自动引入组件 JS，但应用需要自行加载所需样式。resolver 面向 Vue 模板；在脚本中调用 message、notification 等服务，或在 TSX / render 函数中使用组件时，仍需显式导入，并加载相应样式。

手动按需引入

手动选择组件及其自包含样式入口：

import { Button, Space, Table } from '@apollo-design/ui';
import '@apollo-design/theme/tokens.css';
import '@apollo-design/ui/button/style.css';
import '@apollo-design/ui/space/style.css';
import '@apollo-design/ui/table/style.css';

也可从公开子路径导入，例如 import { Button } from '@apollo-design/ui/button'。打包器会保留所用组件及其实际 JS 依赖；各组件的 style.css 包含实现内部所需的样式，插槽中由应用选择的其他组件仍需自己的样式。

全量样式

需要统一加载全库样式时，在应用入口引入：

import '@apollo-design/theme/tokens.css';
import '@apollo-design/ui/style.css';

这种方式仍可使用 JS 的命名导入与 tree-shaking；如果同时启用 resolver，请设置 importStyle: false，避免叠加重复样式。更多结构样式、独立预设和加载顺序见样式引入。