arco-vue-development

name: arco-vue-development description: Develop Vue 3 frontend interfaces using Arco Design Vue component library. Strictly follow Arco Design specifications for component usage, layout, spacing, typography, and visual patterns. Use this skill when building enterprise-level Vue applications with Arco Design. license: MIT compatibility: opencode metadata: audience: frontend-developers framework: vue3 ui-library: arco-design

Arco Design Vue 开发规范

本技能用于使用 Arco Design Vue 组件库开发企业级 Vue 3 应用。必须严格遵循 Arco Design 规范。

核心原则

1. 组件优先: 优先使用 Arco Design 内置组件，而非自定义实现
2. 规范遵循: 严格遵循 Arco Design 的设计规范，包括间距、颜色、字体等
3. 一致性: 保持整个应用的设计一致性
4. 可访问性: 遵循无障碍设计规范

项目初始化

# 安装 Arco Design Vue
npm install @arco-design/web-vue

# 可选：安装图标库
npm install @arco-design/web-vue/es/icon

基础使用

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

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

组件使用规范

1. 布局组件

使用 Grid 栅格系统进行布局：

<a-row :gutter="[16, 16]">
  <a-col :span="8">内容区块</a-col>
  <a-col :span="8">内容区块</a-col>
  <a-col :span="8">内容区块</a-col>
</a-row>

• 间距规范: 使用 4px 基础单位的倍数（4, 8, 12, 16, 20, 24, 32, 40, 48）
• 响应式断点: xs(<768px), sm(≥768px), md(≥992px), lg(≥1200px), xl(≥1920px)

2. 按钮 Button

<!-- 主按钮 -->
<a-button type="primary">主要操作</a-button>

<!-- 次按钮 -->
<a-button>次要操作</a-button>

<!-- 文字按钮 -->
<a-button type="text">文字按钮</a-button>

<!-- 禁用状态 -->
<a-button disabled>禁用</a-button>

<!-- 加载状态 -->
<a-button loading>加载中</a-button>

规范:

• 主按钮用于主要操作，一个页面建议只有一个主按钮
• 按钮组使用 <a-button-group>
• 危险操作使用 type="secondary" 或 status="danger"

3. 表单 Form

使用 a-form 进行表单验证和布局：

<a-form :model="form" :rules="rules" layout="vertical" @submit="handleSubmit">
  <a-form-item label="用户名" field="username" required>
    <a-input v-model="form.username" placeholder="请输入用户名" />
  </a-form-item>
  
  <a-form-item label="邮箱" field="email" required>
    <a-input v-model="form.email" placeholder="请输入邮箱" />
  </a-form-item>
  
  <a-form-item label="状态" field="status">
    <a-select v-model="form.status" placeholder="请选择状态">
      <a-option value="active" label="激活" />
      <a-option value="inactive" label="未激活" />
    </a-select>
  </a-form-item>
  
  <a-form-item>
    <a-button html-type="submit" type="primary">提交</a-button>
  </a-form-item>
</a-form>

规范:

• 使用 layout="vertical" 获取更好的移动端体验
• 必填字段使用 required 属性
• 标签文字使用中文冒号（如"用户名："）
• 错误提示显示在输入框下方

4. 表格 Table

<a-table 
  :columns="columns" 
  :data="data" 
  :pagination="{ current: 1, pageSize: 10, total: 100 }"
  :loading="loading"
  @page-change="handlePageChange"
  @page-size-change="handlePageSizeChange"
>
  <template #status="{ record }">
    <a-tag :color="record.status === 'active' ? 'green' : 'gray'">
      {{ record.status === 'active' ? '激活' : '未激活' }}
    </a-tag>
  </template>
  
  <template #operations="{ record }">
    <a-button type="text" size="small" @click="handleEdit(record)">编辑</a-button>
    <a-button type="text" size="small" status="danger" @click="handleDelete(record)">删除</a-button>
  </template>
</a-table>

<!-- 分页配置 -->
<a-table 
  :data="data"
  :pagination="{
    current: 1,
    pageSize: 10,
    total: 100,
    showTotal: true,           // 显示总数
    showPageSize: true,        // 显示页码选择器
    pageSizeOptions: [10, 20, 50, 100],  // 页码选项
    simple: false,              // 简洁模式
    disabled: false,            // 禁用分页
  }"
/>

<!-- 客户端分页 -->
<a-table 
  :data="allData"
  :pagination="{
    current: 1,
    pageSize: 10,
    total: allData.length,
    isClientSidePagination: true,  // 客户端分页
  }"
/>

规范:

• 表格操作列固定在右侧
• 使用 a-tag 显示状态
• 启用分页和加载状态
• 列对齐：文字左对齐、数字右对齐、操作居中

表格列配置:

const columns = [
  { title: '姓名', dataIndex: 'name', width: 120, align: 'left' },
  { title: '年龄', dataIndex: 'age', width: 80, align: 'right' },
  { title: '操作', dataIndex: 'operations', width: 120, align: 'center', fixed: 'right' },
  { title: '描述', dataIndex: 'desc', ellipsis: true },  // 文字省略
  { title: '状态', dataIndex: 'status', sortable: true },  // 排序
  { title: '创建时间', dataIndex: 'createTime', sorter: (a, b) => a.createTime - b.createTime },
]

### 5. 对话框 Modal/Drawer

```vue
<!-- Modal 对话框 -->
<a-modal 
  v-model:visible="modalVisible" 
  title="标题" 
  @ok="handleOk" 
  @cancel="handleCancel"
  :ok-button-props="{ disabled: !formValid }"
  :cancel-button-props="{ }"
>
  内容区域
</a-modal>

<!-- Drawer 抽屉 -->
<a-drawer
  v-model:visible="drawerVisible"
  title="标题"
  :width="500"
  placement="right"
  @ok="handleOk"
>
  内容区域
</a-drawer>

规范:

• 确认操作使用 Modal
• 复杂表单或详情使用 Drawer
• 必填项未填时禁用确认按钮

6. 消息提示

// 成功
this.$message.success('操作成功')

// 警告
this.$message.warning('请注意')

// 错误
this.$message.error('操作失败')

// 提示
this.$message.info('提示信息')

// 加载
const hide = this.$message.loading('加载中...')
hide() // 手动关闭

规范:

• 成功操作使用 success
• 表单验证失败使用 warning
• 接口错误使用 error
• 位置默认右上角

7. 导航 Menu

<a-menu 
  v-model:selected-keys="selectedKeys" 
  mode="horizontal" 
  :accordion="true"
>
  <a-menu-item key="home">首页</a-menu-item>
  <a-menu-item key="about">关于</a-menu-item>
  <a-sub-menu key="sub">
    <template #title>子菜单</template>
    <a-menu-item key="sub1">选项1</a-menu-item>
    <a-menu-item key="sub2">选项2</a-menu-item>
  </a-sub-menu>
</a-menu>

8. 卡片 Card

<a-card :bordered="false" class="card-demo">
  <template #title>
    <span>卡片标题</span>
  </template>
  <template #extra>
    <a-link>更多</a-link>
  </template>
  卡片内容
</a-card>

9. 标签 Tag

<!-- 普通标签 -->
<a-tag>标签</a-tag>

<!-- 颜色标签 -->
<a-tag color="blue">蓝色</a-tag>
<a-tag color="green">绿色</a-tag>
<a-tag color="orange">橙色</a-tag>
<a-tag color="red">红色</a-tag>

<!-- 可关闭标签 -->
<a-tag closable @close="handleClose">可关闭</a-tag>

10. 图标 Icon

Arco Design Vue 提供了一套完整的图标库。

安装

npm install @arco-design/web-vue

导入方式

// 方式1：按需导入单个图标（推荐）
import { IconHome, IconSearch, IconSettings, IconUser, IconPlus, IconDelete } from '@arco-design/web-vue/es/icon'

// 方式2：全量导入
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
import '@arco-design/web-vue/dist/arco.css'
app.use(ArcoVueIcon)

使用方式

<template>
  <!-- 按钮中使用图标 -->
  <a-button type="primary">
    <template #icon><IconSearch /></template>
    搜索
  </a-button>
  
  <!-- 单独使用图标 -->
  <IconHome />
  
  <!-- 图标旋转 -->
  <IconSettings :style="{ transform: 'rotate(90deg)' }" />
  
  <!-- 图标大小 -->
  <IconUser :size="20" />
  
  <!-- 图标颜色 -->
  <IconDelete :style="{ color: '#F53F3F' }" />
</template>

<script setup>
import { IconHome, IconSearch, IconSettings, IconUser, IconDelete } from '@arco-design/web-vue/es/icon'
</script>

图标资源

• 在线图标库: https://arco.design/iconbox
• Vue 组件文档: https://arco.design/vue/component/icon
• 图标列表: 所有图标以 Icon 开头命名，如 IconHome, IconArrowDown, IconPlus, IconSettings

常用图标速查

11. 气泡卡片 Popover

<!-- 基础用法 -->
<a-popover>
  <template #content>
    <div>气泡内容</div>
  </template>
  <a-button>悬浮显示</a-button>
</a-popover>

<!-- 位置 -->
<a-popover position="bottom">
  <template #content>
    <div>底部气泡</div>
  </template>
  <a-button>位置示例</a-button>
</a-popover>

<!-- 触发方式 -->
<a-popover trigger="click">
  <template #content>
    <div>点击触发</div>
  </template>
  <a-button>点击触发</a-button>
</a-popover>

<!-- 嵌套复杂内容 -->
<a-popover>
  <template #content>
    <div class="popover-content">
      <p>标题</p>
      <a-button type="primary">操作</a-button>
    </div>
  </template>
  <span class="cursor">复杂内容</span>
</a-popover>

position 选项: top, tl, tr, bottom, bl, br, left, lt, lb, right, rt, rb

12. 文字提示 Tooltip

<!-- 基础用法 -->
<a-tooltip content="提示内容">
  <a-button>悬浮显示</aoltip>
</a-tooltip>

<!-- 位置 -->
<a-tooltip position="bottom" content="底部提示">
  <a-button>位置示例</a-button>
</a-tooltip>

<!-- 背景色 -->
<a-tooltip background-color="#165DFF" content="蓝色背景">
  <a-button>自定义颜色</a-button>
</a-tooltip>

<!-- 文字颜色 -->
<a-tooltip color="#FFF" content="白色文字">
  <a-button>自定义文字颜色</a-button>
</a-tooltip>

13. 标签页 Tabs

<!-- 基础用法 -->
<a-tabs v-model:activeKey="activeKey">
  <a-tab-pane key="1" title="标签1">内容1</a-tab-pane>
  <a-tab-pane key="2" title="标签2">内容2</a-tab-pane>
</a-tabs>

<!-- 卡片风格 -->
<a-tabs type="card" v-model:activeKey="activeKey">
  <a-tab-pane key="1" title="标签1">内容1</a-tab-pane>
  <a-tab-pane key="2" title="标签2">内容2</a-tab-pane>
</a-tabs>

<!-- 可编辑标签 -->
<a-tabs type="card" v-model:activeKey="activeKey" editable>
  <a-tab-pane key="1" title="标签1">内容1</a-tab-pane>
  <a-tab-pane key="2" title="标签2">内容2</a-tab-pane>
</a-tabs>

<!-- 禁用 -->
<a-tab-pane key="3" title="禁用标签" disabled>内容3</a-tab-pane>

14. 面包屑 Breadcrumb

<!-- 基础用法 -->
<a-breadcrumb>
  <a-breadcrumb-item>首页</a-breadcrumb-item>
  <a-breadcrumb-item>列表</a-breadcrumb-item>
  <a-breadcrumb-item>详情</a-breadcrumb-item>
</a-breadcrumb>

<!-- 可点击 -->
<a-breadcrumb>
  <a-breadcrumb-item><a href="/">首页</a></a-breadcrumb-item>
  <a-breadcrumb-item><a href="/list">列表</a></a-breadcrumb-item>
  <a-breadcrumb-item>详情</a-breadcrumb-item>
</a-breadcrumb>

<!-- 使用图标 -->
<a-breadcrumb>
  <a-breadcrumb-item>
    <icon-home />
  </a-breadcrumb-item>
  <a-breadcrumb-item>应用管理</a-breadcrumb-item>
  <a-breadcrumb-item>详情</a-breadcrumb-item>
</a-breadcrumb>

15. 开关 Switch

<!-- 基础用法 -->
<a-switch v-model="checked" />

<!-- 禁用 -->
<a-switch disabled />

<!-- 加载状态 -->
<a-switch loading />

<!-- 自定义颜色 -->
<a-switch checked-color="#00B42A" unchecked-color="#F53F3F" />

<!-- 文字描述 -->
<a-switch>
  <template #checked-icon><icon-check /></template>
  <template #unchecked-icon><icon-close /></template>
</a-switch>

16. 下拉菜单 Dropdown

<!-- 基础用法 -->
<a-dropdown>
  <a-button>下拉菜单 <icon-down /></a-button>
  <template #content>
    <a-doption>选项1</a-doption>
    <a-doption>选项2</a-doption>
    <a-doption>选项3</a-doption>
  </template>
</a-dropdown>

<!-- 带分组 -->
<a-dropdown>
  <a-button>下拉菜单</a-button>
  <template #content>
    <a-dgroup title="分组1">
      <a-doption>选项1</a-doption>
      <a-doption>选项2</a-doption>
    </a-dgroup>
    <a-dgroup title="分组2">
      <a-doption>选项3</a-doption>
    </a-dgroup>
  </template>
</a-dropdown>

<!-- 禁用选项 -->
<a-dropdown>
  <a-button>下拉菜单</a-button>
  <template #content>
    <a-doption>正常选项</a-doption>
    <a-doption disabled>禁用选项</a-doption>
  </template>
</a-dropdown>

<!-- 点击触发 -->
<a-dropdown trigger="click">
  <a-button>点击触发</a-button>
  <template #content>
    <a-doption @click="handleClick">点击执行</a-doption>
  </template>
</a-dropdown>

17. 加载 Loading

<!-- 全屏加载 -->
<a-spin :spinning="loading">
  <div>内容区域</div>
</a-spin>

<!-- 遮罩加载 -->
<a-spin :spinning="loading" tip="加载中...">
  <div class="content">内容区域</div>
</a-spin>

<!-- 自定义图标 -->
<a-spin :spinning="loading">
  <template #indicator>
    <icon-loading class="spin-icon" />
  </template>
  <div>内容区域</div>
</a-spin>

<!-- 按钮加载 -->
<a-button :loading="loading">提交</a-button>
<a-button :loading="true" disabled>加载中...</a-button>

18. 空状态 Empty

<!-- 基础用法 -->
<a-empty />

<!-- 自定义描述 -->
<a-empty description="暂无数据" />

<!-- 图片 -->
<a-empty :image-src="customImage" />

<!-- 操作按钮 -->
<a-empty description="暂无数据">
  <a-button type="primary">创建</a-button>
</a-empty>

19. 折叠面板 Collapse

<!-- 基础用法 -->
<a-collapse>
  <a-collapse-item key="1" title="标题1">
    <div>内容1</div>
  </a-collapse-item>
  <a-collapse-item key="2" title="标题2">
    <div>内容2</div>
  </a-collapse-item>
</a-collapse>

<!-- 手风琴模式 -->
<a-collapse accordion>
  <a-collapse-item key="1" title="标题1">
    <div>内容1</div>
  </a-collapse-item>
  <a-collapse-item key="2" title="标题2">
    <div>内容2</div>
  </a-collapse-item>
</a-collapse>

<!-- 默认展开 -->
<a-collapse :default-active-keys="['1']">
  <a-collapse-item key="1" title="默认展开">
    <div>内容1</div>
  </a-collapse-item>
</a-collapse>

20. 进度条 Progress

<!-- 线性进度条 -->
<a-progress :percent="50" />

<!-- 百分比显示 -->
<a-progress :percent="50" show-text />

<!-- 自定义格式 -->
<a-progress :percent="50" format="{value}% 完成" />

<!-- 状态 -->
<a-progress :percent="30" status="error" />
<a-progress :percent="60" status="warning" />
<a-progress :percent="100" status="success" />

<!-- 环形进度条 -->
<a-progress :percent="50" type="circle" />

<!-- 仪表盘类型 -->
<a-progress :percent="50" type="dashboard" />

配色规范

主题色

Arco Design 默认主题色为蓝色(#165DFF)，常用色值：

中性色

间距规范

使用 4px 基础单位：

• size-1: 4px
• size-2: 8px
• size-3: 12px
• size-4: 16px
• size-5: 20px
• size-6: 24px
• size-8: 32px
• size-10: 40px

组件尺寸

• 大型: size="large" - 用于重要操作或主页面
• 中型: size="medium" - 默认尺寸
• 小型: size="small" - 用于表格、操作列等紧凑场景

响应式设计

<!-- 响应式显示 -->
<a-responsive-grid breakpoint="desktop">
  <div>桌面端内容</div>
</a-responsive-grid>

<!-- 或使用 CSS 类 -->
<div class="hidden-xs">桌面端显示</div>

状态管理

使用 Pinia 进行状态管理：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null as UserInfo | null,
    token: '',
  }),
  getters: {
    isLoggedIn: (state) => !!state.token,
  },
  actions: {
    async login(credentials: LoginCredentials) {
      const res = await api.login(credentials)
      this.token = res.token
      this.userInfo = res.userInfo
    },
  },
})

请求封装

使用 axios 并集成 Arco Design 消息提示：

import axios from 'axios'
import { Message } from '@arco-design/web-vue'

const instance = axios.create({
  baseURL: '/api',
  timeout: 10000,
})

instance.interceptors.response.use(
  (response) => response.data,
  (error) => {
    const msg = error.response?.data?.message || '网络错误'
    Message.error(msg)
    return Promise.reject(error)
  }
)

export default instance

TypeScript 类型

// 定义接口
interface User {
  id: number
  name: string
  email: string
  status: 'active' | 'inactive'
}

// 表格列类型
interface TableColumn {
  title: string
  dataIndex: string
  width?: number
  align?: 'left' | 'center' | 'right'
}

常见模式

空状态

<a-empty description="暂无数据" />

加载状态

<a-spin :size="40" tip="加载中...">
  实际内容
</a-spin>

确认对话框

<a-popconfirm 
  title="确定要删除吗？"
  @ok="handleDelete"
  @cancel="handleCancel"
>
  <a-button type="primary" status="danger">删除</a-button>
</a-popconfirm>

步骤条

<a-steps :current="current">
  <a-step title="步骤1" description="描述信息" />
  <a-step title="步骤2" description="描述信息" />
  <a-step title="步骤3" description="描述信息" />
</a-steps>

时间线

<a-timeline>
  <a-timeline-item color="green">创建成功 - 2024-01-01</a-timeline-item>
  <a-timeline-item color="blue">处理中 - 2024-01-02</a-timeline-item>
  <a-timeline-item color="gray">等待中 - 2024-01-03</a-timeline-item>
</a-timeline>

注意事项

1. 不要重复造轮子: 优先使用 Arco Design 组件
2. 保持简洁: 避免过度设计，简洁清晰为主
3. 一致性: 同类操作使用相同的组件和交互模式
4. 可访问性: 确保键盘导航和屏幕阅读器支持
5. 性能: 大列表使用虚拟滚动，合理使用 v-if/v-show

深色主题

全局深色模式

import { setTheme, ThemeMode } from '@arco-design/web-vue'

// 切换到深色模式
setTheme(ThemeMode.Dark)

// 切换到浅色模式
setTheme(ThemeMode.Light)

// 跟随系统
setTheme(ThemeMode.Auto)

CSS 变量覆盖

深色模式下会自动应用以下 CSS 变量：

/* 浅色模式默认值 */
:root {
  --color-bg-1: #ffffff;
  --color-bg-2: #f7f8fa;
  --color-bg-3: #f2f3f5;
  --color-bg-4: #e5e6eb;
  --color-text-1: #1d2129;
  --color-text-2: #4e5969;
  --color-text-3: #86909c;
  --color-border-1: #e5e6eb;
  --color-border-2: #c9cdd4;
  --color-border-3: #86909c;
  --color-border-4: #4e5969;
}

/* 深色模式 */
[data-theme='dark'] {
  --color-bg-1: #1d2129;
  --color-bg-2: #23272e;
  --color-bg-3: #2d323b;
  --color-bg-4: #373c47;
  --color-text-1: #e5e6eb;
  --color-text-2: #8b949e;
  --color-text-3: #6d7681;
  --color-border-1: #3d424e;
  --color-border-2: #4e5969;
  --color-border-3: #6d7681;
  --color-border-4: #8b949e;
}

组件级深色样式

<template>
  <!-- 使用 class 切换 -->
  <div class="dark-mode-card">
    <a-card>
      <div>深色卡片内容</div>
    </a-card>
  </div>
</template>

<style scoped>
.dark-mode-card {
  --card-bg: #23272e;
  --card-border: #3d424e;
}

.dark-mode-card .arco-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
</style>

主题定制

自定义主题色

import { setGlobalConfig } from '@arco-design/web-vue'

setGlobalConfig({
  theme: {
    primary: '#165DFF',  // 自定义主色
  },
})

全局配置

import { setGlobalConfig } from '@arco-design/web-vue'

setGlobalConfig({
  // 组件尺寸
  size: 'medium',  // 'mini' | 'small' | 'medium' | 'large'
  
  // 国际化
  locale: 'zh-CN',  // 'zh-CN' | 'en-US'
  
  // 主题
  theme: {
    primary: '#165DFF',
  },
  
  // 消息配置
  message: {
    max: 3,
    duration: 3000,
  },
})

动画过渡

组件内置动画

Arco Design 组件内置了过渡动画：

<!-- 淡入淡出 -->
<a-fade-in>
  <div>内容</div>
</a-fade-in>

<!-- 缩放 -->
<a-scale-in>
  <div>内容</div>
</a-scale-in>

<!-- 滑动 -->
<a-slide-up-in>
  <div>内容</div>
</a-slide-up-in>

<a-slide-down-in>
  <div>内容</div>
</a-slide-down-in>

<a-slide-left-in>
  <div>内容</div>
</a-slide-left-in>

<a-slide-right-in>
  <div>内容</div>
</a-slide-right-in>

Vue Transition

<template>
  <transition name="fade">
    <div v-if="show">内容</div>
  </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

响应式断点

使用响应式类

<!-- 响应式隐藏/显示 -->
<div class="hidden-xs">桌面端显示</div>
<div class="visible-xs">手机端显示</div>

<!-- 响应式栅格 -->
<a-row>
  <a-col :xs="24" :md="12" :lg="8">响应式列</a-col>
</a-row>

<!-- 响应式间距 -->
<div class="mt-xs-4 mt-md-8">响应式间距</div>

表单验证

内置规则

<template>
  <a-form :model="form" :rules="rules" layout="vertical">
    <a-form-item label="用户名" field="username">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="邮箱" field="email">
      <a-input v-model="form.email" placeholder="请输入邮箱" />
    </a-form-item>
    <a-form-item label="密码" field="password">
      <a-input v-model="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
  </a-form>
</template>

<script setup>
const form = ref({})
const rules = {
  username: [
    { required: true, message: '请输入用户名' },
    { minLength: 3, message: '用户名至少3个字符' },
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '请输入正确的邮箱格式' },
  ],
  password: [
    { required: true, message: '请输入密码' },
    { minLength: 6, message: '密码至少6个字符' },
  ],
}
</script>

自定义验证

const rules = {
  password: [
    {
      validator: (value, callback) => {
        if (!value) {
          callback('请输入密码')
        } else if (value.length < 6) {
          callback('密码至少6个字符')
        } else if (!/\d/.test(value)) {
          callback('密码必须包含数字')
        } else {
          callback()
        }
      },
    },
  ],
}

国际化

基础用法

import { useI18n } from 'vue-i18n'
import zhCN from '@arco-design/web-vue/es/locale/zh-CN'
import enUS from '@arco-design/web-vue/es/locale/en-US'

const { t } = useI18n()

// 中文
setGlobalConfig({ locale: zhCN })

// 英文
setGlobalConfig({ locale: enUS })

// 使用
const message = t('form.submit')

辅助功能

屏幕阅读器

<!-- 添加 aria-label -->
<a-button aria-label="提交表单">提交</a-button>

<!-- 禁用阅读 -->
<span aria-hidden="true">仅供展示</span>

<!-- 正确关联 -->
<label for="username">用户名</label>
<input id="username" v-model="form.username" />

键盘导航

<!-- 焦点顺序 -->
<a-button tabindex="1">第一个</a-button>
<a-button tabindex="3">第三个</a-button>
<a-button tabindex="2">第二个</a-button>

<!-- 快捷键 -->
<a-input 
  v-model="value" 
  @keydown.enter="handleEnter"
  @keydown.escape="handleEscape"
/>

性能优化

大列表优化

<!-- 虚拟列表 -->
<a-virtual-list 
  :data="largeList" 
  :item-size="60"
>
  <template #item="{ item }">
    <div>{{ item.name }}</div>
  </template>
</a-virtual-list>

图片懒加载

<a-image 
  :src="src" 
  loading="lazy"
/>

按需加载

# 使用 unplugin-vue-components 自动按需导入
npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [ArcoResolver()],
    }),
  ],
})

附录

常用颜色速查

常用间距速查

文档链接

• Arco Design Vue 官网
• 组件文档
• 设计系统
• 图标库