规则驱动：Cursor AI智能性能显著提升

规则驱动：Cursor AI智能性能大幅提升

目录

• • 📌 一、何为Cursor规则？
  • 📂 二、规则文件的位置与命名准则
  • 🧠 三、规则文件的功用
  • 🛠️ 四、怎样创建.mdc规则文件
  • • ✅ 手动操作
  • ⚡ 借助Cursor快速生成
  • ✍️ 五、规则文件的编写方式（内容结构推荐）
  • • ✅ 示例结构模板：
  • 📈 六、使用窍门与建议
  • ✅ 七、示例项目效果呈现及应用场景
  • 🧾 八、总结与最优实践

📌 一、何为Cursor规则？

Cursor规则 是专为 Cursor 编辑器
打造的功能模块，它能让开发者为自身项目编写具备结构化与上下文感知特性的规则，以此助力AI
更精准地洞悉项目架构、技术栈、约定及开发习惯，进而生成更为精准且易维护的代码。

📂 二、规则文件的位置与命名准则

Cursor 会自动识别 .cursor/rules/ 路径下的规则文件：

项目根目录/
└── .cursor/
    └── rules/
        └── *.mdc   👈 规则文件（需采用 .mdc 扩展名）

• 📁 路径固定：必须是 .cursor/rules/
• 📄 扩展名固定：必须是 .mdc
• ✅可存在多个文件，建议对每个规则按主题单独拆分编写，例如 unocss-guidelines.mdc, project-structure.mdc, naming-conventions.mdc 等

🧠 三、规则文件的功用

• 明确项目运用的技术栈（Vue 3, Element Plus, Pinia, TypeScript, Vite）
• 清晰项目约定（组件/文件命名、CSS 命名、导入顺序）
• 规避误判：降低 Cursor 提供的错误补全或重复实现已有功能的情况
• 增强智能性：助力 AI 生成契合项目风格、结构规范、命名约定的代码

🛠️ 四、怎样创建.mdc规则文件

✅ 手动操作

1. 创建规则目录

   mkdir -p .cursor/rules

2. 创建规则文件

   touch .cursor/rules/project-guidelines.mdc

说明：文件名可自行设定，扩展名必须为 .mdc

⚡ 借助Cursor快速生成

在 Cursor 编辑器里打开 Chat 窗口，输入 / 并选取弹出的 Generate Cursor Rules 选项，便能自动生成
.cursor/rules/ 目录以及默认的规则文件。

✍️ 五、规则文件的编写方式（内容结构推荐）

.mdc 文件本质是 Markdown 文档，但具有特殊结构。以下以开源项目 vue3-element-admin 为例，给出适用于 Vue 3 +
TypeScript 项目的推荐规则模板写法：

✅ 示例结构模板：

# 项目基本情况说明

- 本项目基于 Vue 3 + TypeScript + Element Plus + Pinia + Vite 构建。
- 采用组合式 API（`<script setup lang="ts">`）开展开发。
- 状态管理运用 Pinia，进行模块化组织。
- 路由采用 Vue Router，实施权限动态路由配置。
- 接口请求统一封装在 `@/utils/request.ts` 中，使用 Axios。
- 表格、表单页面基于 Element Plus 封装通用组件，提升复用性。

# 组件与文件命名规范

- 组件文件名采用 `PascalCase` 格式，例如：`UserTable.vue`, `LoginForm.vue`
- 公共组件放置在 `src/components/` 下，业务组件可置于 `src/views/模块/components/` 中
- 文件夹名和非组件的 `.ts/.scss` 文件采用 `kebab-case` 格式，例如：`user-api.ts`, `login-form.scss`
- 页面文件命名与路由保持一致，采用 `kebab-case`，例如：`user-list.vue`, `role-edit.vue`


# 样式及 CSS 使用约定

- **优先运用原子类：** 利用 UnoCSS 提供的原子类进行布局与样式设置，例如常见的 flex 布局（`flex justify-center items-center` 等）。样式语义清晰，便于维护。
- **常用组合提取为全局快捷方式：** 对于**频繁使用**的原子类组合，需在 `unocss.config.ts` 中通过 `shortcuts` 定义全局组合类。例如：将 `flex justify-center items-center` 定义为 `flex-center`，如此便可在整个项目中复用。组合类命名应简洁且具语义性，体现布局或功能意图。
- **非常用组合使用局部类：** 对于特定组件中使用但不常见的、超过3个的原子类组合，应在组件内使用局部CSS类（使用`<style scoped>`块），避免过多的全局组合对全局命名空间造成污染。
- **避免重复代码：** 无论是通过全局`shortcuts`还是局部CSS类，都应避免在多个地方重复编写相同的原子类列表，遵循代码 DRY（Don't Repeat Yourself）原则。
- **样式优先级：** 优先考虑 UnoCSS 解决方案（原子类或组合类），其次才是传统 CSS。当需要使用传统 CSS时，遵循 BEM 命名规范，即 `block__element--modifier` 格式。

# 导入顺序规范（保持统一结构）

1. Vue 相关 API（如 `ref`, `computed`, `onMounted`）
2. 第三方库（如 `element-plus`, `axios`）
3. 工具函数（如 `@/utils/*`）
4. 状态管理（如 `@/store/*`）
5. 项目内部组件、模块（如 `@/components`, `@/views`）
6. 样式文件


# 开发留意要点

- 使用 TypeScript，避免使用 `any`；
- 组件职责单一，保持结构清晰；
- 所有组件必须使用组合式 API；
- 适当添加注释，提升 AI 理解程度。

📈 六、使用窍门与建议

• 拆分规则主题： 可针对不同模块分别编写规则，例如 style-guidelines.mdc、project-structure.mdc、component-conventions.mdc，使 AI 更易查阅上下文。
• 越具体越佳： 规则越明确，Cursor 越能精准给出契合你期望的代码。
• 规避废话与无效规则： Focus on 可执行、可操作、可验证的规则。比如“命名要清晰”不如“类名遵循 BEM 规范且用小写字母连接”具体实用。
• 随项目迭代更新规则： 规则需与代码同步更新，尤其是引入新库、工具或编码风格变更时。

✅ 七、示例项目效果呈现及应用场景

以开源项目 vue3-element-admin
为例，添加 .cursor/rules/import-order.mdc 规则文件：

使用步骤示例：

• 在 Cursor 编辑器的 “Chat” 视图中打开首页（dashboard/index.vue）。
• 输入提示：“依据规则文件调整导入顺序”。
• Cursor Agent 读取规则文件 import-order.mdc，自动重新梳理当前文件的导入顺序。

效果呈现：

该功能极大提升代码一致性与维护效率，降低人工调整成本。

🧾 八、总结与最优实践

通过严格制定并运用项目规则，结合 Cursor AI 的智能辅助能力，可显著提升代码质量、一致性及开发效率。