87 lines
1.9 KiB
Markdown
87 lines
1.9 KiB
Markdown
---
|
||
name: arco-vue-architecture
|
||
description: "Arco Design Vue 架构和编码约定。用于 Vue 3 SFC 结构、Composition API、全局/局部注册、导入、属性、事件、插槽和 v-model。"
|
||
user-invocable: false
|
||
---
|
||
|
||
# 架构约定
|
||
|
||
把需求转换为使用 Arco Design Vue 的 Vue 3 代码时使用本参考。
|
||
|
||
## 推荐 SFC 结构
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
import { reactive } from 'vue';
|
||
import { Message } from '@arco-design/web-vue';
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
});
|
||
|
||
const handleSubmit = () => {
|
||
Message.success(`提交：${form.name}`);
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<a-form :model="form" layout="vertical" @submit-success="handleSubmit">
|
||
<a-form-item field="name" label="名称" required>
|
||
<a-input v-model="form.name" placeholder="请输入名称" />
|
||
</a-form-item>
|
||
<a-button type="primary" html-type="submit">提交</a-button>
|
||
</a-form>
|
||
</template>
|
||
```
|
||
|
||
## 组件注册
|
||
|
||
完整注册：
|
||
|
||
```ts
|
||
app.use(ArcoVue);
|
||
```
|
||
|
||
局部导入：
|
||
|
||
```ts
|
||
import { Button, Space } from '@arco-design/web-vue';
|
||
```
|
||
|
||
示例和小型应用可以使用完整注册。生产项目应跟随仓库已有的导入策略。
|
||
|
||
## 属性、事件、插槽
|
||
|
||
- 模板属性使用 kebab-case：`show-jumper`、`row-selection`、`popup-container`。
|
||
- 动态属性使用 `:`：`:columns="columns"`、`:data="rows"`。
|
||
- 事件使用 `@`：`@change`、`@page-change`、`@ok`、`@cancel`。
|
||
- 插槽使用 `#`：`#title`、`#extra`、`#cell="{ record, column }"`。
|
||
|
||
## v-model
|
||
|
||
组件主值使用普通 `v-model`。
|
||
|
||
```vue
|
||
<a-input v-model="keyword" />
|
||
<a-select v-model="status" :options="options" />
|
||
```
|
||
|
||
组件文档声明命名绑定时，使用命名 `v-model`。
|
||
|
||
```vue
|
||
<a-modal v-model:visible="visible" title="编辑">
|
||
...
|
||
</a-modal>
|
||
```
|
||
|
||
## 避免 React 模式
|
||
|
||
不要使用：
|
||
|
||
- `Form.useForm()`
|
||
- JSX 子节点访问方式
|
||
- `Component.Sub` 子组件语法
|
||
- 直接复制 React 的 `value` / `onChange` 示例
|
||
|
||
应使用本 skill 中的 Vue 参考。
|