🚀 作者主页： 有来技术
🔥 开源项目： 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 规则文件
✅ 手动方式
- touch .cursor/rules/project-guidelines.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 的智能辅助能力，可显著提升代码质量、一致性和开辟服从。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
|
发表于 
