arco-design/arco-design-vue

Arco Design Vue Skill

@arco-design/web-vue 是 Arco Design 的 Vue 3 组件库实现。

关键约定

编写 Arco Design Vue 代码时始终遵守这些规则：

• 使用 Vue 3。新代码优先使用 <script setup lang="ts"> 和 Composition API。
• 完整引入：

import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import App from './App.vue';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

• 组件与服务从根包导入：import { Button, Table, Form, Message } from '@arco-design/web-vue'。
• 图标从图标入口导入：import { IconSearch, IconPlus } from '@arco-design/web-vue/es/icon'。
• 样式完整引入使用 @arco-design/web-vue/dist/arco.css。手动按需引入时使用组件样式，例如 @arco-design/web-vue/es/button/style/css.js。
• 默认全局组件标签使用 a- 前缀：<a-button>、<a-table>、<a-form>、<a-form-item>。
• 模板中的属性使用 kebab-case：html-type、show-jumper、row-selection。
• 事件使用 Vue 语法：@click、@change、@page-change、@submit-success。
• 双向绑定使用 v-model 或命名形式：v-model:visible、v-model:selected-keys、v-model:current。
• 插槽使用 #slot-name；作用域插槽参数以组件文档为准。
• 表单使用 :model、field 和校验规则；子输入控件用 v-model。
• 日期时间组件内部使用 dayjs；不要引入 Moment.js。
• 优先使用本 skill 中的 Vue 示例。不要套用 React 专属 API，例如 Form.useForm、JSX children 或 Component.Sub。

Skill 索引

需要完整属性、事件、插槽、示例和使用要点时，加载对应参考文件。

安装与配置

| 主题 | 文件 | 适用场景 | |---|---|---| | 安装 | getting-started.md | 安装 @arco-design/web-vue、注册 ArcoVue、引入样式、配置按需加载 | | 全局配置 | config-provider.md | 使用 app.use(ArcoVue, options) 或 <a-config-provider> 配置语言、前缀、尺寸等 | | 主题 | theming.md | Less 变量、主题包、暗黑模式、CSS/样式引入 | | 国际化 | internationalization.md | 语言包和 <a-config-provider :locale="..."> | | 架构约定 | architecture.md | Vue 3 SFC 结构、导入、v-model、属性、事件、插槽、组件注册 |

通用

| 组件 | 文件 | 适用场景 | |---|---|---| | Button | button.md | 操作按钮、加载按钮、图标按钮、按钮组 | | ConfigProvider | config-provider.md | 全局语言、前缀、尺寸、滚动更新等配置 | | Icon | icon.md | 内置图标、图标注册、按需导入、iconfont.cn | | Link | link.md | 链接及其状态、图标链接 | | Typography | typography.md | 标题、段落、文本、省略、复制、编辑 |

布局

| 组件 | 文件 | 适用场景 | |---|---|---| | Divider | divider.md | 水平或垂直分割线 | | Grid | grid.md | 24 栅格、响应式行列布局 | | Layout | layout.md | 页面骨架、页头、侧边栏、内容区、页脚 | | Space | space.md | 行内或块级元素间距 |

导航

| 组件 | 文件 | 适用场景 | |---|---|---| | Breadcrumb | breadcrumb.md | 页面层级和路由面包屑 | | Dropdown | dropdown.md | 下拉菜单和命令浮层 | | Menu | menu.md | 侧边导航、顶部导航、子菜单 | | PageHeader | page-header.md | 页头、返回操作、面包屑、额外操作 | | Pagination | pagination.md | 分页、跳转、页大小切换 | | Steps | steps.md | 步骤流程和进度 |

数据录入

| 组件 | 文件 | 适用场景 | |---|---|---| | AutoComplete | auto-complete.md | 输入建议和搜索补全 | | Cascader | cascader.md | 多级级联选择 | | Checkbox | checkbox.md | 多选、全选、半选状态 | | ColorPicker | color-picker.md | 颜色选择 | | DatePicker | date-picker.md | 日期、周、月、季度、年、范围选择 | | Form | form.md | 表单、校验、动态字段、布局、提交处理 | | Input | input.md | 文本输入、搜索、密码、文本域相关模式 | | InputNumber | input-number.md | 数字输入、精度、最小/最大值 | | InputTag | input-tag.md | 标签输入和编辑 | | Mention | mention.md | 在文本中提及用户或主题 | | Radio | radio.md | 单选和单选组 | | Rate | rate.md | 评分 | | Select | select.md | 选择器、多选、搜索、选项插槽 | | Slider | slider.md | 滑动输入和范围输入 | | Switch | switch.md | 布尔开关 | | Textarea | textarea.md | 多行文本输入 | | TimePicker | time-picker.md | 时间和时间范围选择 | | Transfer | transfer.md | 两栏穿梭选择 | | TreeSelect | tree-select.md | 树形数据选择 | | Upload | upload.md | 文件上传、拖拽上传、图片上传 | | VerificationCode | verification-code.md | 验证码或 OTP 输入 |

数据展示

| 组件 | 文件 | 适用场景 | |---|---|---| | Avatar | avatar.md | 用户头像和头像组 | | Badge | badge.md | 数字徽标、状态点、通知标记 | | Calendar | calendar.md | 日历展示 | | Card | card.md | 内容卡片和卡片栅格 | | Carousel | carousel.md | 轮播图 | | Collapse | collapse.md | 折叠面板 | | Comment | comment.md | 评论展示和嵌套评论 | | Descriptions | descriptions.md | 键值详情展示 | | Empty | empty.md | 空状态 | | Image | image.md | 图片展示和预览 | | List | list.md | 列表和虚拟列表 | | OverflowList | overflow-list.md | 折叠溢出的列表项 | | Popover | popover.md | 富内容气泡卡片 | | Statistic | statistic.md | 数值、倒计时、指标 | | Table | table.md | 表格、列、排序、筛选、选择、虚拟滚动 | | Tabs | tabs.md | 标签页、可编辑标签页、卡片式标签页 | | Tag | tag.md | 标签、可选标签、可关闭标签 | | Timeline | timeline.md | 时间线和活动流 | | Tooltip | tooltip.md | 悬浮或聚焦文字提示 | | Tree | tree.md | 树形层级数据 |

反馈

| 组件 | 文件 | 适用场景 | |---|---|---| | Alert | alert.md | 行内警告提示 | | Drawer | drawer.md | 抽屉面板和抽屉表单 | | Message | message.md | 全局轻量提示 | | Modal | modal.md | 对话框、确认流程、弹窗表单 | | Notification | notification.md | 富内容全局通知 | | Popconfirm | popconfirm.md | 轻量确认气泡 | | Progress | progress.md | 线形/环形进度 | | Result | result.md | 成功、错误、404 等结果状态 | | Skeleton | skeleton.md | 骨架屏加载占位 | | Spin | spin.md | 加载中 |

其他

| 组件 | 文件 | 适用场景 | |---|---|---| | Affix | affix.md | 滚动时固定元素 | | Anchor | anchor.md | 页内锚点导航 | | BackTop | back-top.md | 回到顶部 | | ResizeBox | resize-box.md | 可伸缩容器和分割面板 | | Scrollbar | scrollbar.md | 自定义滚动条 | | Split | split.md | 面板分割 | | Trigger | trigger.md | 基础弹出触发和定位 | | Watermark | watermark.md | 文字或图片水印 |

模式

| 主题 | 文件 | 适用场景 | |---|---|---| | 表单模式 | form-patterns.md | 复杂表单、校验、动态字段、表单提交 | | 表格模式 | table-patterns.md | 远程表格、插槽、行选择、分页 | | 弹窗模式 | modal-patterns.md | 弹窗表单、确认、全局反馈 | | 受控值 | controlled-uncontrolled.md | v-model、default-*、受控/非受控状态 | | 响应式设计 | responsive-design.md | 栅格断点、响应式表单、自适应仪表盘 |