Arco Design Vue Skill 是围绕 @arco-design/web-vue（Arco Design 的 Vue 3 组件库）整理的参考型技能，目标是帮助开发者按 Vue 3 的写法正确使用 Arco 组件来构建页面与界面。
关键约定
编写 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。 - 优先使用本技能中的 Vue 示例；不要套用 React 专属 API，例如
Form.useForm、JSX children 或Component.Sub。
主要能力与参考范围
技能内含一份索引，需要完整属性、事件、插槽、示例与使用要点时加载对应参考文件。
安装与配置
- 安装：安装
@arco-design/web-vue、注册 ArcoVue、引入样式、配置按需加载。 - 全局配置：使用
app.use(ArcoVue, options)或<a-config-provider>配置语言、前缀、尺寸等。 - 主题：Less 变量、主题包、暗黑模式、CSS/样式引入。
- 国际化：语言包与
<a-config-provider :locale="...">。 - 架构约定：Vue 3 SFC 结构、导入、
v-model、属性、事件、插槽、组件注册。
组件覆盖
通用：Button、ConfigProvider、Icon、Link、Typography。
布局：Divider、Grid（24 栅格、响应式行列）、Layout（页面骨架、页头、侧边栏、内容区、页脚）、Space。
导航：Breadcrumb、Dropdown、Menu、PageHeader、Pagination、Steps。
数据录入：AutoComplete、Cascader、Checkbox、ColorPicker、DatePicker、Form、Input、InputNumber、InputTag、Mention、Radio、Rate、Select、Slider、Switch、Textarea、TimePicker、Transfer、TreeSelect、Upload、VerificationCode。
数据展示：Avatar、Badge、Calendar、Card、Carousel、Collapse、Comment、Descriptions、Empty、Image、List、OverflowList、Popover、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tree。
反馈：Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin。
其他：Affix、Anchor、BackTop、ResizeBox、Scrollbar、Split、Trigger、Watermark。
模式
- 表单模式：复杂表单、校验、动态字段、表单提交。
- 表格模式：远程表格、插槽、行选择、分页。
- 弹窗模式：弹窗表单、确认、全局反馈。
- 受控值：
v-model、default-*、受控/非受控状态。 - 响应式设计：栅格断点、响应式表单、自适应仪表盘。
使用方式
在编写 Vue 3 + Arco Design Vue 代码时，按上述约定使用组件与服务；遇到需要完整属性、事件、插槽或示例时，查阅技能内对应的参考文件。
适用场景
适合需要构建 Vue 页面、创建 Vue UI、使用 Arco Vue 编写前端代码、开发 Vue 仪表盘或应用的场景，以及在使用 Arco Design Vue 各组件时查询用法与约定。
限制
该技能面向 Vue 3 与 @arco-design/web-vue，不适用于 React 专属 API 写法；日期时间组件内部使用 dayjs，不应引入 Moment.js。其余关于收费、价格、平台等信息暂未提供。