Vue 3前端在trae中的AI开发规则

配置个人规则（全局生效）点击设置图标 → 规则 → 个人规则，创建 user_rules.md，把下面这套Vue 3前端开发规则复制进去：## 前端开发个人规则 (Vue 3 + JavaScript)

## 前端开发个人规则 (Vue 3 + JavaScript)
 
## 交互与基础规范
- 对话语言：始终使用**中文**。
- 代码风格：默认使用 **JavaScript (ES6+)**，优先使用 Composition API 的 `` 语法糖。
- 命名规范：
  - 变量/函数：**小驼峰**（`getUserInfo`, `currentPage`）
  - 常量：**大写蛇形**（`MAX_PAGE_SIZE`, `API_TIMEOUT`）
  - 组件：**大驼峰/PascalCase**（`UserList`, `BaseButton`）
  - 响应式变量：推荐使用 `xxxRef` 后缀（`countRef`, `listRef`）
- 文件结构：单文件组件遵循 ` →  → ` 顺序。
 
## Vue 3 框架约束
- **API 风格**：默认使用 **Composition API + ``**，避免 Options API。
- **响应式系统**：
  - 基本类型：使用 `ref()`
  - 对象/数组：使用 `reactive()`
  - 状态管理：优先使用 **Pinia**
- **模板规范**：
  - 指令缩写：使用 `:` 替代 `v-bind:`，`@` 替代 `v-on:`，`#` 替代 `v-slot:`
  - 条件渲染：优先 `v-show` 切换显示，`v-if` 用于条件性创建/销毁
  - 列表渲染：必须提供唯一的 `:key`，优先使用 ID 而非索引
- **组件通信**：
  - 父子：使用 `defineProps` 和 `defineEmits`
  - 复杂场景使用 `provide/inject`
 
## 样式与 UI
- **样式方案**：优先使用 `` 或 **CSS Modules**
- **UI 库**：若提及 Element Plus/Naive UI/Ant Design Vue，需保持组件命名与官方一致
- **类名规范**：使用 BEM 风格：`block__element--modifier`
- **样式优先级**：避免使用 `!important` 和深层选择器（`>>>`, `/deep/`, `::v-deep`）除非必要
 
## 请求与数据处理
- **请求封装**：统一使用项目的 `request.js` 封装，禁止裸写 `fetch/axios`
- **错误处理**：所有异步操作必须包含 `try/catch` 或 `.catch()` 错误处理
- **数据处理**：数组操作优先使用 `map/filter/reduce`
 
## 性能与最佳实践
- **组件优化**：
  - 列表渲染必须提供 `:key`
  - 避免在模板中写复杂表达式，使用 `computed` 或方法
  - 大型组件使用 `defineAsyncComponent` 异步加载
- **内存管理**：
  - `setTimeout`/`setInterval`/`addEventListener` 必须在 `onUnmounted` 中清理
- **代码组织**：
  - 单个组件不超过 300 行，复杂逻辑拆分为组合式函数
  - 工具函数提取到 `/utils` 目录
  - 常量提取到 `/constants` 目录

配置项目规则（当前项目专用）在项目根目录创建 .trae/rules/project_rules.md，把下面这套后台管理项目规则复制进去，按实际情况改：

# XX管理后台项目规则
 
## 项目基本信息
- **技术栈**: Vue 3 + JavaScript + Vite + Pinia + Element Plus
- **Node版本**: >= 18.0.0
- **包管理器**: npm
 
## 目录结构规范
src/
├── api/              # API 接口封装
│   ├── modules/      # 按模块划分
│   └── request.js    # axios 封装
├── components/       # 公共组件
│   ├── common/       # 通用组件
│   └── business/     # 业务组件
├── composables/      # 组合式函数
├── router/           # 路由配置
├── stores/           # Pinia Store
│   └── modules/      # 业务模块 Store
├── utils/            # 工具函数
└── views/            # 页面组件
    ├── dashboard/    # 仪表盘
    ├── product/      # 产品管理
    └── system/       # 系统设置
 
## Vue 3 + Composition API 规范
- 必须使用 `` 语法
- 禁止使用 Options API（历史代码除外）
- 响应式变量：`ref` 用于基本类型，`reactive` 用于对象
 
## Pinia Store 规范
- Store 命名: `useXxxStore`
- 简单状态：使用单个 Store
- 复杂模块：拆分到 `stores/modules/`
 
## API 接口规范
- 统一从 `api/` 目录导入，禁止直接在组件里写 `fetch/axios`
- 接口按模块拆分到 `api/modules/` 下
 
## 权限控制
- 路由权限：在 `router/modules/` 中配置 `meta.roles`
- 按钮权限：使用自定义指令 `v-permission`
 
## 代码提交规范
- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `refactor`: 重构
- `test`: 测试相关
- `chore`: 构建/工具