宝藏攻略！学会使用 Cursor Rules，让 Cursor AI 智能程度直线爆表

🚀 作者主页： 有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

📌 一、什么是 Cursor Rules？

Cursor Rules 是一个为 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/rules/，方便 Cursor 自动识别与加载
文件格式	使用 Markdown 格式（扩展名 .mdc），支持丰富文本表达和结构化规则
样式策略	优先采用 UnoCSS 原子类和组合类，辅以 BEM 命名规范保证样式语义清晰且易维护
API 引入	建议借助 unplugin-auto-import 实现自动导入，提升开发效率
工具函数复用	利用成熟库如 @vueuse/core，避免重复封装，保持代码简洁且高复用
Vue 开发规范	统一采用 Vue 3 + <script setup lang="ts"> + Composition API 规范，增强代码可维护性
规则管理维护	规则应随项目演进持续更新，保持与实际代码一致，确保 AI 生成的代码质量和风格稳定
规则拆分建议	按功能模块拆分规则文件，增强规则可读性和管理便捷性

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