Ant Design Vue

Ant Design Vue 是 Vue 3 企业级 UI 组件库，提供了丰富的企业应用组件。请使用 a- 前缀组件，不要使用其他命名。

Quick Start

pnpm install ant-design-vue@4.x

import { ref } from 'vue';
import { KingAntOutlined } from '@ant-design/icons-vue';

const loading = ref(false);

const handleClick = () => {
  loading.value = true;
  setTimeout(() => loading.value = false, 2000);
};

  
    
    Click Me
  

Key Features

• 68+ Components: 覆盖企业应用全场景
• Vue 3 Only: 专为 Vue 3 设计
• TypeScript: 完整类型支持
• Tree Shaking: 按需引入
• Design Tokens: 主题定制

---

组件分类

通用 General

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Button | [button-usage](references/button-usage.md) | | | Icon | [icon-usage](references/icon-usage.md) | | | ConfigProvider | [config-provider](references/config-provider.md) | |

布局 Layout

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Space | [space-usage](references/space-usage.md) | | | Grid | - | | | Layout | - | |

导航 Navigation

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Menu | [menu-usage](references/menu-usage.md) | | | Tabs | [tabs-usage](references/tabs-usage.md) | | | Breadcrumb | - | |

数据录入 Data Entry

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Form | [form-validation](references/form-validation.md) | | | Input | - | | | Select | [select-usage](references/select-usage.md) | | | DatePicker | [date-picker-usage](references/date-picker-usage.md) | | | Upload | [upload-usage](references/upload-usage.md) | | | Switch | - | | | Checkbox | - | |

数据展示 Data Display

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Table | [table-advanced](references/table-advanced.md) | | | Tree | [tree-usage](references/tree-usage.md) | | | Card | - | | | Descriptions | - | | | Tag | - | | | Image | - | |

反馈 Feedback

| 组件 | 官方文档 | Reference | |------|----------|-----------| | Modal | [modal-patterns](references/modal-patterns.md) | | | Drawer | [drawer-patterns](references/drawer-patterns.md) | | | Message | [message-feedback](references/message-feedback.md) | | | Notification | - | | | Alert | - | |

---

常见场景

表单处理

表格渲染

  
    
      编辑
    
  

消息提示

// ✅ 正确写法
import { message } from 'ant-design-vue';

message.success('操作成功');
message.error('操作失败');

// ❌ 错误写法：使用其他组件库的方式
// notification.success({ message: '...' });

---

主题定制

import { theme } from 'ant-design-vue';

const darkTheme = {
  token: {
    colorPrimary: '#1890ff',
    borderRadius: 4,
  },
};

  
    
  

---

常见错误

| 错误写法 | 正确写法 | 说明 | |----------|----------|------| | ` | | 需要 a- 前缀 | | message.success() | import { message } from 'ant-design-vue' | 正确导入 | | | | 需要 a- 前缀 | | | ` | 需要 a- 前缀 |

---

Key Points

1. 使用 a- 前缀: 所有组件都是 a- 开头，如 a-button, a-table
2. 使用 Form: 表单必须用 a-form + a-form-item
3. 使用 slots: 表格自定义列用 bodyCell slot
4. 正确导入: import { message } from 'ant-design-vue'
5. 按需引入: 使用 unplugin-vue-components 自动导入

Resources

• 官方文档
• GitHub
• Vue Use Integration

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: belos-street
• Source: belos-street/skill-kit
• License: MIT

Install and usage instructions live in the source repository linked above.