给Trae定规矩，直接拿走不谢

兄弟们，是不是每次让AI写前端代码都有种“开盲盒”的感觉？

你明明用的是Vue 3 + Composition API，它给你整一堆Options API的老写法；你项目里统一用 snake_case，它偏给你整 camelCase；你明明用的是Element Plus，它给你整了个Ant Design的组件……

不是说不能跑，但每次改这些“小毛病”的时间加起来，都够你自己写一遍了。

其实问题不在AI笨，而是它不知道你项目的规矩。就像一个临时工，干活挺麻利，但不知道工地的规范。

今天咱们就聊聊怎么把Trae调教成一个“懂规矩”的前端开发助手。全程实操，复制就能用。

Rules规则简介

Rules规则是给Trae生成结果添加的限制，让它生成的代码更贴合团队规范，主要作用：

• 约束代码风格（如强制用驼峰命名、要求方法写注释等）
• 限定技术选型（如指定优先使用某技术/框架/库，禁止使用某组件/框架/库）
• 提前指定配置参数（如提前设置连接数据库方式、帐号密码等）

Rules规则有两种：个人规则和项目规则
两者区别

配置个人规则（全局生效）

点击设置图标 → 规则 → 个人规则，创建 user_rules.md，把下面这套Vue 3前端开发规则复制进去：

## 前端开发个人规则 (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`: 构建/工具

配置完成后，点击上下文 → 工作区索引构建刷新一下，让Trae识别到这两个规则。

Rules解决的是“AI知不知道规矩”的问题，MCP解决的是“AI有没有最新资料”的问题，这是另外一个话题了。

最后

Trae本身是个好工具，但让它“懂规矩”才是效率的关键。
今天这一套配置下来，你的Trae已经不是那个“开盲盒”式写代码的临时工了——它知道你的项目用什么技术栈、组件怎么命名、API怎么封装、权限怎么控制……

小提醒：关注后才能复制哦😯