arco-design-vue
starsforks
How to install arco-design-vue?
arco-design/arco-design-skill/arco-design-vue
$npx -y skills add arco-design/arco-design-skill --skill arco-design-vueArco Design Vue UI 组件库参考，面向 Vue 3 和 @arco-design/web-vue。当用户要求构建 Vue 页面、创建 Vue UI、使用 Arco Vue 编写前端代码、开发 Vue 仪表盘或应用，或提到 Arco Design Vue、@arco-design/web-vue、a-button、a-table、a-form、a-modal、a-select、Message、任意 Arco Vue 组件名时使用。覆盖安装、全局注册、按需加载、主题、国际化、Vue 3 Composition
SKILL.md
| 1 | # Arco Design Vue Skill |
| 2 | |
| 3 | `@arco-design/web-vue` 是 Arco Design 的 Vue 3 组件库实现。 |
| 4 | |
| 5 | ## 关键约定 |
| 6 | |
| 7 | 编写 Arco Design Vue 代码时始终遵守这些规则： |
| 8 | |
| 9 | - 使用 Vue 3。新代码优先使用 `<script setup lang="ts">` 和 Composition API。 |
| 10 | - 完整引入： |
| 11 | |
| 12 | ```ts |
| 13 | import { createApp } from 'vue'; |
| 14 | import ArcoVue from '@arco-design/web-vue'; |
| 15 | import '@arco-design/web-vue/dist/arco.css'; |
| 16 | import App from './App.vue'; |
| 17 | |
| 18 | const app = createApp(App); |
| 19 | app.use(ArcoVue); |
| 20 | app.mount('#app'); |
| 21 | ``` |
| 22 | |
| 23 | - 组件与服务从根包导入：`import { Button, Table, Form, Message } from '@arco-design/web-vue'`。 |
| 24 | - 图标从图标入口导入：`import { IconSearch, IconPlus } from '@arco-design/web-vue/es/icon'`。 |
| 25 | - 样式完整引入使用 `@arco-design/web-vue/dist/arco.css`。手动按需引入时使用组件样式，例如 `@arco-design/web-vue/es/button/style/css.js`。 |
| 26 | - 默认全局组件标签使用 `a-` 前缀：`<a-button>`、`<a-table>`、`<a-form>`、`<a-form-item>`。 |
| 27 | - 模板中的属性使用 kebab-case：`html-type`、`show-jumper`、`row-selection`。 |
| 28 | - 事件使用 Vue 语法：`@click`、`@change`、`@page-change`、`@submit-success`。 |
| 29 | - 双向绑定使用 `v-model` 或命名形式：`v-model:visible`、`v-model:selected-keys`、`v-model:current`。 |
| 30 | - 插槽使用 `#slot-name`；作用域插槽参数以组件文档为准。 |
| 31 | - 表单使用 `:model`、`field` 和校验规则；子输入控件用 `v-model`。 |
| 32 | - 日期时间组件内部使用 `dayjs`；不要引入 Moment.js。 |
| 33 | - 优先使用本 skill 中的 Vue 示例。不要套用 React 专属 API，例如 `Form.useForm`、JSX children 或 `Component.Sub`。 |
| 34 | |
| 35 | ## Skill 索引 |
| 36 | |
| 37 | 需要完整属性、事件、插槽、示例和使用要点时，加载对应参考文件。 |
| 38 | |
| 39 | ### 安装与配置 |
| 40 | |
| 41 | | 主题 | 文件 | 适用场景 | |
| 42 | |---|---|---| |
| 43 | | 安装 | [getting-started.md](references/overview/getting-started.md) | 安装 `@arco-design/web-vue`、注册 ArcoVue、引入样式、配置按需加载 | |
| 44 | | 全局配置 | [config-provider.md](references/overview/config-provider.md) | 使用 `app.use(ArcoVue, options)` 或 `<a-config-provider>` 配置语言、前缀、尺寸等 | |
| 45 | | 主题 | [theming.md](references/overview/theming.md) | Less 变量、主题包、暗黑模式、CSS/样式引入 | |
| 46 | | 国际化 | [internationalization.md](references/overview/internationalization.md) | 语言包和 `<a-config-provider :locale="...">` | |
| 47 | | 架构约定 | [architecture.md](references/overview/architecture.md) | Vue 3 SFC 结构、导入、`v-model`、属性、事件、插槽、组件注册 | |
| 48 | |
| 49 | ### 通用 |
| 50 | |
| 51 | | 组件 | 文件 | 适用场景 | |
| 52 | |---|---|---| |
| 53 | | Button | [button.md](references/components/general/button.md) | 操作按钮、加载按钮、图标按钮、按钮组 | |
| 54 | | ConfigProvider | [config-provider.md](references/components/general/config-provider.md) | 全局语言、前缀、尺寸、滚动更新等配置 | |
| 55 | | Icon | [icon.md](references/components/general/icon.md) | 内置图标、图标注册、按需导入、iconfont.cn | |
| 56 | | Link | [link.md](references/components/general/link.md) | 链接及其状态、图标链接 | |
| 57 | | Typography | [typography.md](references/components/general/typography.md) | 标题、段落、文本、省略、复制、编辑 | |
| 58 | |
| 59 | ### 布局 |
| 60 | |
| 61 | | 组件 | 文件 | 适用场景 | |
| 62 | |---|---|---| |
| 63 | | Divider | [divider.md](references/components/layout/divider.md) | 水平或垂直分割线 | |
| 64 | | Grid | [grid.md](references/components/layout/grid.md) | 24 栅格、响应式行列布局 | |
| 65 | | Layout | [layout.md](references/components/layout/layout.md) | 页面骨架、页头、侧边栏、内容区、页脚 | |
| 66 | | Space | [space.md](references/components/layout/space.md) | 行内或块级元素间距 | |
| 67 | |
| 68 | ### 导航 |
| 69 | |
| 70 | | 组件 | 文件 | 适用场景 | |
| 71 | |---|---|---| |
| 72 | | Breadcrumb | [breadcrumb.md](references/components/navigation/breadcrumb.md) | 页面层级和路由面包屑 | |
| 73 | | Dropdown | [dropdown.md](references/components/navigation/dropdown.md) | 下拉菜单和命令浮层 | |
| 74 | | Menu | [menu.md](references/components/navigation/menu.md) | 侧边导航、顶部导航、子菜单 | |
| 75 | | PageHeader | [page-header.md](references/components/navigation/page-header.md) | 页头、返回操作、面包屑、额外操作 | |
| 76 | | Pagination | [pagination.md](references/components/navigation/pagination.md) | 分页、跳转、页大小切换 | |
| 77 | | Steps | [steps.md](references/components/navigation/steps.md) | 步骤流程和进度 | |
| 78 | |
| 79 | ### 数据录入 |
| 80 | |
| 81 | | 组件 | 文件 | 适用场景 | |
| 82 | |---|---|---| |
| 83 | | AutoComplete | [auto-complete.md](references/components/data-entry/auto-complete.md) | 输入建议和搜索补全 | |
| 84 | | Cascader | [cascader.md](references/components/data-entry/cascader.md) | 多级级联选择 | |
| 85 | | Checkbox | [checkbox.md](references/components/data-entry/checkbox.md) | 多选、全选、半选状态 | |
| 86 | | ColorPicker | [color-picker.md](references/components/data-entry/color-picker.md) | 颜色选择 | |
| 87 | | DatePicker | [date-picker.md](references/components/data-entry/date-picker.md) | 日期、周、月、季度、年、范围选择 | |
| 88 | | Form | [form.md](references/components/data-entry/form.md) | 表单、校验、动态字段、布局、提交处理 | |
| 89 | | Input | [input.md](references/components/data-entry/input.md) | 文本输入、搜索、密码、文本域相关模式 | |
| 90 | | InputNumber | [input-number.md](references/components/data-entry/input-number.md) | 数字输入、精度、最小/最大值 | |
| 91 | | InputTag | [input-tag.md](references/components/data-entry/input-tag.md) | 标签输入和编辑 | |
| 92 | | Mention | [mention.md](references/components/data-entry/mention.md) | 在文本中提及用户或主题 | |
| 93 | | Radio | [radio.md](references/components/data-entry/radio.md) | 单选和单选组 | |
| 94 | | Rate | [rate.md](references/components/data-entry/rate.md) | 评分 | |
| 95 | | Select | [select.md](references/components/data-entry/select.md) | 选择器、多选、搜索、选项插槽 | |
| 96 | | Slider | [slider.md](references/components/data-entry/slider.md) | 滑动输入和范围输入 | |
| 97 | | Switch | [switch.md](references/components/ |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
