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 | 栅格断点、响应式表单、自适应仪表盘 |