ant-design-vue

name ant-design-vue description 基于 Vue 3 的企业级 UI 组件库，提供 68+ 高质量组件。IMPORTANT: 这是 Ant Design Vue，不是 React 版本。使用 a- 前缀组件（如 a-button, a-table）。 Ant Design Vue 是 Vue 3 企业级 UI 组件库，提供了丰富的企业应用组件。 请使用 a- 前缀组件 ，不要使用其他命名。 Quick Start pnpm install ant-design-vue@4.x <script setup> 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); }; </script> <template> <a-button type="primary" :loading="loading" @click="handleClick"> <template #icon><KingAntOutlined /></template> Click Me </a-button> </template> Key Features 68+ Components : 覆盖企业应用全场景 Vue 3 Only : 专为 Vue 3 设计 TypeScript : 完整类型支持 Tree Shaking : 按需引入 Design Tokens : 主题定制 组件分类 通用 General 组件 官方文档 Reference Button button-usage Icon icon-usage ConfigProvider config-provider 布局 Layout 组件 官方文档 Reference Space space-usage Grid - Layout - 导航 Navigation 组件 官方文档 Reference Menu menu-usage Tabs tabs-usage Breadcrumb - 数据录入 Data Entry 组件 官方文档 Reference Form form-validation Input - Select select-usage DatePicker date-picker-usage Upload upload-usage Switch - Checkbox - 数据展示 Data Display 组件 官方文档 Reference Table table-advanced Tree tree-usage Card - Descriptions - Tag - Image - 反馈 Feedback 组件 官方文档 Reference Modal modal-patterns Drawer drawer-patterns Message message-feedback Notification - Alert - 常见场景 表单处理 <!-- ✅ 正确写法：使用 a-form --> <a-form :model="formState" @finish="onFinish"> <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]"> <a-input v-model:value="formState.username" /> </a-form-item> </a-form> <!-- ❌ 错误写法：忘记使用 a-form-item 包裹 --> <!-- <a-input v-model:value="formState.username" /> --> 表格渲染 <!-- ✅ 正确写法：使用 a-table --> <a-table :columns="columns" :data-source="data" :pagination="false"> <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a @click="handleEdit(record)">编辑</a> </template> </template> </a-table> <!-- ❌ 错误写法：忘记使用 bodyCell slot --> 消息提示 // ✅ 正确写法 import { message } from 'ant-design-vue' ; message. success ( '操作成功' ); message. error ( '操作失败' ); // ❌ 错误写法：使用其他组件库的方式 // notification.success({ message: '...' }); 主题定制 <script setup> import { theme } from 'ant-design-vue'; const darkTheme = { token: { colorPrimary: '#1890ff', borderRadius: 4, }, }; </script> <template> <a-config-provider :theme="darkTheme"> <App /> </a-config-provider> </template> 常见错误 错误写法 正确写法 说明 <Button> <a-button> 需要 a- 前缀 message.success() import { message } from 'ant-design-vue' 正确导入 <Form> <a-form> 需要 a- 前缀 <Table> <a-table> 需要 a- 前缀 Key Points 使用 a- 前缀 : 所有组件都是 a- 开头，如 a-button , a-table 使用 Form : 表单必须用 a-form + a-form-item 使用 slots : 表格自定义列用 bodyCell slot 正确导入 : import { message } from 'ant-design-vue' 按需引入 : 使用 unplugin-vue-components 自动导入 Resources 官方文档 GitHub Vue Use Integration