dbfb3c4bd9
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
CI / Test (windows-latest) (push) Has been cancelled
CI / Lint (ubuntu-latest) (push) Has been cancelled
CI / Lint (windows-latest) (push) Has been cancelled
CI / Check (ubuntu-latest) (push) Has been cancelled
CI / Check (windows-latest) (push) Has been cancelled
CodeQL / Analyze (${{ matrix.language }}) (none, javascript-typescript) (push) Has been cancelled
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
CI / CI OK (push) Has been cancelled
47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
---
|
||
description: "Vue 组件编码规范。Use when: 编写 Vue 单文件组件、创建页面、修改模板、处理组件逻辑。"
|
||
applyTo: "**/*.vue"
|
||
---
|
||
|
||
# Vue 组件编码规范
|
||
|
||
## 脚本
|
||
|
||
- 使用 `<script setup lang="ts">`，禁止 Options API
|
||
- 路径别名使用 `#/`（如 `import { xxx } from '#/api/core/xxx'`）
|
||
- 类型导入使用 `import type`
|
||
- Props 使用 `defineProps<T>()` 泛型语法
|
||
- Emits 使用 `defineEmits<T>()`
|
||
|
||
## 表格
|
||
|
||
- 使用 `useVbenVxeGrid` hook 创建表格，类型为 `VxeGridProps`
|
||
- 分页配置使用 `pagerConfig: {}`
|
||
- 数据代理使用 `proxyConfig.ajax.query`，返回 `{ items, total }` 结构
|
||
- 复用已有渲染器：`CellImage`（图片列）、`CellLink`（链接列）
|
||
|
||
## 表单
|
||
|
||
- 使用 `useVbenForm` hook，schema 驱动
|
||
- 验证规则使用 zod
|
||
|
||
## 弹窗
|
||
|
||
- 使用 `useVbenModal` hook 管理弹窗状态
|
||
|
||
## 模板
|
||
|
||
- UI 文本使用中文
|
||
- 合理使用 Ant Design Vue 组件（`a-button`, `a-tag`, `a-card` 等）
|
||
|
||
## 图标
|
||
|
||
- 使用 `VbenIcon` 组件，从 `@vben/common-ui` 导入
|
||
- 图标来源为 [Iconify](https://icon-sets.iconify.design/)，通过 `icon` prop 传入图标名称
|
||
- 常用图标集：`mdi:`、`solar:`、`material-symbols:`、`system-uicons:`、`svg-spinners:`
|
||
- 示例：
|
||
```vue
|
||
import { VbenIcon } from '@vben/common-ui';
|
||
<VbenIcon icon="mdi:account" />
|
||
<VbenIcon icon="solar:question-circle-bold" class="ml-2" />
|
||
``` |