AntDesignVue组件库技能Skill ant-design-vue

Ant Design Vue 是一个专为 Vue 3 设计的 Ant Design 组件库,提供全面的安装、使用、API 参考和模板指导。适用于构建企业级 Vue 应用界面,包含各种 UI 组件如按钮、表格、表单等。关键词:Ant Design Vue, Vue 3, 组件库, 前端开发, UI 设计。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

名称: ant-design-vue 描述: 提供 Ant Design Vue (AntDV) 组件库的全面指导,适用于 Vue 3。涵盖安装、使用、API 参考、模板和所有组件类别。在构建企业级 Vue 3 应用与 Ant Design 时使用。 许可证: 完整条款在 LICENSE.txt 中

何时使用此技能

当用户提到以下内容时,始终使用此技能:

  • “Ant Design Vue”、“AntDV”、“Ant Design of Vue”
  • 使用 Ant Design 构建 Vue 3 应用
  • 在 Vue 上下文中使用 UI 组件,如 Button、Table、Form、Modal、Menu
  • “Ant Design Vue 4.x”、“AntDV 4”
  • 请求"使用 Ant Design Vue 实现 [组件]"
  • 请求 Ant Design Vue API 或配置

如何使用此技能

此技能的组织方式与 Ant Design Vue 官方文档结构匹配。

1. 识别用户需求

  • 入门/设置examples/getting-started/installation.mdtemplates/project-setup.md
  • 组件使用 → 参见下面的组件类别
  • API 参考api/components.mdapi/config-provider.md
  • 主题/国际化examples/advanced/
  • 模板templates/component-template.md

2. 组件类别(一对一映射)

通用 (General)

  • 包含: Button、Icon、Typography
  • 文件: examples/components/general.md

布局 (Layout)

  • 包含: Divider、Grid、Layout、Space
  • 文件: examples/components/layout.md

导航 (Navigation)

  • 包含: Anchor、Breadcrumb、Dropdown、Menu、Pagination、Steps
  • 文件: examples/components/navigation.md

数据录入 (Data Entry)

  • 包含: AutoComplete、Cascader、Checkbox、DatePicker、Form、Input、InputNumber、Mentions、Radio、Rate、Select、Slider、Switch、TimePicker、Transfer、TreeSelect、Upload
  • 文件: examples/components/data-entry.md

数据展示 (Data Display)

  • 包含: Avatar、Badge、Calendar、Card、Carousel、Collapse、Descriptions、Empty、Image、List、Popover、QRCode、Segmented、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tour、Tree
  • 文件: examples/components/data-display.md

反馈 (Feedback)

  • 包含: Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin、Watermark
  • 文件: examples/components/feedback.md

其他 (Other)

  • 包含: Affix、App、BackTop、ConfigProvider、FloatButton
  • 文件: examples/components/other.md

3. API 与高级主题

  • 组件 API: api/components.md(常见组件的属性、事件)
  • ConfigProvider API: api/config-provider.md(全局配置、主题)
  • 主题定制: examples/advanced/theme-customization.md(设计令牌)
  • 国际化: examples/advanced/internationalization.md

4. 模板

  • 组件模板: templates/component-template.md(基本、表单、模态模式)
  • 项目设置: templates/project-setup.md(Vite、Main.ts、App.vue 设置)