蓝星空

分享一个 Cursor 项目规则（适用于前端开发 Vue 3 项目）

3 min

分享一个我现在正在使用的 Cursor 项目规则（适用于前端开发 Vue 3 项目）。

也可以直接下载 cursor-project-rules-for-vue3.mdc 这个文件放到项目根目录下面的 *.cursor\rules* 目录里面，Cursor 会默认启用这个目录里面的所有规则。

规则内容如下：

description: “Lanxk.com Vue 3 项目规范和开发指南 - Cursor 项目规则”

globs: [”**/*.{vue,ts,scss,js,jsx,tsx}”]

alwaysApply: true

项目规范

技术栈规范

  • 前端框架：Vue 3 (v3.5.13, 组合式API)
  • UI框架：Element Plus (v2.7.4)
  • 状态管理：Pinia (v2.1.7)
  • 样式：SASS (v1.75.0)
  • 构建工具：Vite (v5.2.6)
  • TypeScript (v5.7.x)
  • Node.js (≥v18.0.0)

代码规范

组件开发规范

  • 使用 PascalCase 命名Vue组件文件（如：TemplateBase.vue）
  • 功能相似的组件放在同一目录下
  • 组件必须使用 <script setup> 语法
  • Props 定义必须指定类型和默认值
  • 禁止直接修改 props，使用 emit 通知父组件更新

样式编写规范

  • 使用 kebab-case 命名 CSS 类（如：todo-list）
  • 必须遵循 BEM 命名规范：
    • 块：block
    • 元素：block__element
    • 修饰符：block--modifier
  • 组件样式必须使用 scoped 属性
  • 禁止使用行内样式
  • 禁止直接使用 Element Plus 的类名作为选择器（如：.el-input）

状态管理规范

  • 全局状态必须使用 Pinia store 管理
  • 使用 computed 属性获取派生状态，避免方法调用
  • Store 中的 action 必须使用 async/await 处理异步
  • 组件中优先使用 props/emit，避免滥用全局状态

TypeScript 规范

  • 必须显式声明类型
  • 禁止使用 any 类型
  • 接口和类型定义使用 PascalCase
  • 优先使用 interface 而非 type

项目结构规范

src/
├── api/ # API请求
├── assets/ # 静态资源
├── components/ # 组件
├── router/ # 路由
├── stores/ # Pinia存储
├── utils/ # 工具函数
└── views/ # 页面

禁止事项

  • 禁止使用 jQuery 或直接操作 DOM
  • 禁止在模板中使用复杂表达式
  • 禁止直接修改 props 中的对象属性
  • 禁止在组件中使用全局变量
  • 禁止使用特定框架的类名作为选择器

特殊注意事项

  1. 保留 CSS 中原有的 !important 关键字
  2. 保留原有的代码注释和 console.log
  3. 保持代码中的全角双引号：在所有代码修改中（比如注释、文案等），必须严格保留全角双引号（“”），不要把已有的全角双引号修改为半角双引号（""）
  4. 使用 watch 要注意性能问题，避免一些不必要的更新和渲染
  5. 已经在 vite.config.js 文件中配置了自动导入，所有 Vue 的 API（包括 ref、onMounted、watch、nextTick 等）都会被自动导入，不需要手动导入
cursor Cursor项目规则

相关文章