# Ant Design Vue > 基于 Vue 3 的企业级 UI 组件库，提供 68+ 高质量组件。IMPORTANT: 这是 Ant Design Vue，不是 React 版本。使用 a- 前缀组件（如 a-button, a-table）。 - **Type:** Skill - **Install:** `agentstack add skill-belos-street-skill-kit-ant-design-vue` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [belos-street](https://agentstack.voostack.com/s/belos-street) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [belos-street](https://github.com/belos-street) - **Source:** https://github.com/belos-street/skill-kit/tree/main/skills/ant-design-vue ## Install ```sh agentstack add skill-belos-street-skill-kit-ant-design-vue ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About Ant Design Vue 是 Vue 3 企业级 UI 组件库，提供了丰富的企业应用组件。**请使用 a- 前缀组件**，不要使用其他命名。 ## Quick Start ```bash pnpm install ant-design-vue@4.x ``` ```vue 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](https://www.antdv.com/components/button) | [button-usage](references/button-usage.md) | | | [Icon](https://www.antdv.com/components/icon) | [icon-usage](references/icon-usage.md) | | | [ConfigProvider](https://www.antdv.com/components/config-provider) | [config-provider](references/config-provider.md) | | ### 布局 Layout | 组件 | 官方文档 | Reference | |------|----------|-----------| | [Space](https://www.antdv.com/components/space) | [space-usage](references/space-usage.md) | | | [Grid](https://www.antdv.com/components/grid) | - | | | [Layout](https://www.antdv.com/components/layout) | - | | ### 导航 Navigation | 组件 | 官方文档 | Reference | |------|----------|-----------| | [Menu](https://www.antdv.com/components/menu) | [menu-usage](references/menu-usage.md) | | | [Tabs](https://www.antdv.com/components/tabs) | [tabs-usage](references/tabs-usage.md) | | | [Breadcrumb](https://www.antdv.com/components/breadcrumb) | - | | ### 数据录入 Data Entry | 组件 | 官方文档 | Reference | |------|----------|-----------| | [Form](https://www.antdv.com/components/form) | [form-validation](references/form-validation.md) | | | [Input](https://www.antdv.com/components/input) | - | | | [Select](https://www.antdv.com/components/select) | [select-usage](references/select-usage.md) | | | [DatePicker](https://www.antdv.com/components/date-picker) | [date-picker-usage](references/date-picker-usage.md) | | | [Upload](https://www.antdv.com/components/upload) | [upload-usage](references/upload-usage.md) | | | [Switch](https://www.antdv.com/components/switch) | - | | | [Checkbox](https://www.antdv.com/components/checkbox) | - | | ### 数据展示 Data Display | 组件 | 官方文档 | Reference | |------|----------|-----------| | [Table](https://www.antdv.com/components/table) | [table-advanced](references/table-advanced.md) | | | [Tree](https://www.antdv.com/components/tree) | [tree-usage](references/tree-usage.md) | | | [Card](https://www.antdv.com/components/card) | - | | | [Descriptions](https://www.antdv.com/components/descriptions) | - | | | [Tag](https://www.antdv.com/components/tag) | - | | | [Image](https://www.antdv.com/components/image) | - | | ### 反馈 Feedback | 组件 | 官方文档 | Reference | |------|----------|-----------| | [Modal](https://www.antdv.com/components/modal) | [modal-patterns](references/modal-patterns.md) | | | [Drawer](https://www.antdv.com/components/drawer) | [drawer-patterns](references/drawer-patterns.md) | | | [Message](https://www.antdv.com/components/message) | [message-feedback](references/message-feedback.md) | | | [Notification](https://www.antdv.com/components/notification) | - | | | [Alert](https://www.antdv.com/components/alert) | - | | --- ## 常见场景 ### 表单处理 ```vue ``` ### 表格渲染 ```vue 编辑 ``` ### 消息提示 ```ts // ✅ 正确写法 import { message } from 'ant-design-vue'; message.success('操作成功'); message.error('操作失败'); // ❌ 错误写法：使用其他组件库的方式 // notification.success({ message: '...' }); ``` --- ## 主题定制 ```vue 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 - [官方文档](https://www.antdv.com/components/overview-cn/) - [GitHub](https://github.com/vueComponent/ant-design-vue) - [Vue Use Integration](https://www.antdv.com/components/utilities-cn) ## 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](https://github.com/belos-street) - **Source:** [belos-street/skill-kit](https://github.com/belos-street/skill-kit) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-belos-street-skill-kit-ant-design-vue - Seller: https://agentstack.voostack.com/s/belos-street - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.