宝藏攻略！学会使用 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 规则文件
✅ 手动方式
- 创建规则目录
mkdir -p .cursor/rules- 创建规则文件
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（``）进行开发。- 状态管理使用 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类（使用``块），避免过多的全局组合污染全局命名空间。- **避免重复代码：** 不论是通过全局`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 自动识别与加载.mdc），支持丰富文本表达和结构化规则unplugin-auto-import 实现自动导入，提升开发效率@vueuse/core，避免重复封装，保持代码简洁且高复用通过严格制定并应用项目规则，结合 Cursor AI 的智能辅助能力，可显著提升代码质量、一致性和开发效率。
