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

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

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

规则内容如下：

---

description: "Lanxk.com Vue 3 项目规范和开发指南"

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. 请勿将文案和注释中的全角引号（“”）改为半角引号（""）