ant-design-vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

ALWAYS use this skill when the user mentions:

"Ant Design Vue", "AntDV", "Ant Design of Vue"
Building Vue 3 applications with Ant Design
Using UI components like Button, Table, Form, Modal, Menu in a Vue context
"Ant Design Vue 4.x", "AntDV 4"
Requests to "implement a [component] with Ant Design Vue"
Requests for Ant Design Vue API or configuration

当用户提及以下内容时，请务必使用此技能：

"Ant Design Vue"、"AntDV"、"Ant Design of Vue"
使用Ant Design构建Vue 3应用
在Vue环境中使用Button、Table、Form、Modal、Menu等UI组件
"Ant Design Vue 4.x"、"AntDV 4"
请求“使用Ant Design Vue实现某个[组件]”
请求Ant Design Vue的API或配置信息

How to use this skill

如何使用此技能

This skill is organized to match the Ant Design Vue official documentation structure.

此技能的组织结构与Ant Design Vue官方文档结构一致。

1. Identify the User's Need

1. 识别用户需求

Getting Started/Setup →

examples/getting-started/installation.md

templates/project-setup.md

Component Usage → See Component Categories below
API Reference →
```
api/components.md
```
or
```
api/config-provider.md
```
Theme/i18n →
```
examples/advanced/
```
Templates →
```
templates/component-template.md
```

入门/设置 →

examples/getting-started/installation.md

或

templates/project-setup.md

组件使用 → 参见下方组件分类
API参考 →
```
api/components.md
```
或
```
api/config-provider.md
```
主题/国际化 →
```
examples/advanced/
```
模板 →
```
templates/component-template.md
```

2. Component Categories (One-to-One Mapping)

2. 组件分类（一一对应）

通用 (General)

Contains: Button, Icon, Typography
File:
```
examples/components/general.md
```

布局 (Layout)

Contains: Divider, Grid, Layout, Space
File:
```
examples/components/layout.md
```

导航 (Navigation)

Contains: Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps
File:
```
examples/components/navigation.md
```

数据录入 (Data Entry)

Contains: AutoComplete, Cascader, Checkbox, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
File:
```
examples/components/data-entry.md
```

数据展示 (Data Display)

Contains: Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, QRCode, Segmented, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tour, Tree
File:
```
examples/components/data-display.md
```

反馈 (Feedback)

Contains: Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin, Watermark
File:
```
examples/components/feedback.md
```

其他 (Other)

Contains: Affix, App, BackTop, ConfigProvider, FloatButton
File:
```
examples/components/other.md
```

通用组件

包含：Button、Icon、Typography
对应文件：
```
examples/components/general.md
```

布局组件

包含：Divider、Grid、Layout、Space
对应文件：
```
examples/components/layout.md
```

导航组件

包含：Anchor、Breadcrumb、Dropdown、Menu、Pagination、Steps
对应文件：
```
examples/components/navigation.md
```

数据录入组件

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

数据展示组件

包含：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
```

反馈组件

包含：Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin、Watermark
对应文件：
```
examples/components/feedback.md
```

其他组件

包含：Affix、App、BackTop、ConfigProvider、FloatButton
对应文件：
```
examples/components/other.md
```

3. API & Advanced Topics

3. API与进阶主题

Components API:
```
api/components.md
```
(Props, Events for common components)
ConfigProvider API:
```
api/config-provider.md
```
(Global config, Theme)

Theme Customization:

examples/advanced/theme-customization.md

(Design Token)

Internationalization:

examples/advanced/internationalization.md

组件API：
```
api/components.md
```
（常用组件的Props、Events）
ConfigProvider API：
```
api/config-provider.md
```
（全局配置、主题）

主题自定义：

examples/advanced/theme-customization.md

（Design Token）

国际化：

examples/advanced/internationalization.md

4. Templates

4. 模板

Component Templates:
```
templates/component-template.md
```
(Basic, Form, Modal patterns)
Project Setup:
```
templates/project-setup.md
```
(Vite, Main.ts, App.vue setup)

组件模板：
```
templates/component-template.md
```
（基础、表单、模态框模式）
项目搭建：
```
templates/project-setup.md
```
（Vite、Main.ts、App.vue配置）