arco-design-vue

Arco Design Vue スキル

@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 はインポートしないでください。
• このスキルにある Vue の例を優先して使用してください。Form.useForm、JSX children、Component.Sub など、React 専用の API を流用しないでください。

スキルインデックス

属性、イベント、スロット、例、使用上のポイントをすべて確認するには、該当する参考ファイルを読み込んでください。

インストールと設定

テーマ	ファイル	適用場面
インストール	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	栅格断点、响应式表单、自适应仪表盘