Cursor Rules怎么配置Vue项目规范？

简单说，要是项目里没有这个文件，Cursor就会按它自己的通用模板来输出代码，到头来你不得不手动调整大半天。所以，

，让AI从一开始就清楚你的技术栈、语法约束和目录惯例。

创建并放置.cursorrules文件

在Vue项目根目录（也就是放着package.json和vite.config.ts的那个文件夹）下，新建一个纯文本文件，名字必须是

。注意，文件名开头那个英文点号不能少，也不能写成cursorrules.txt，否则Cursor根本认不出来。

这一步操作本身没什么技术含量，VS Code里右键新建文件即可。但位置一旦放错——比如扔到src目录下——整个规则就会失效，白白浪费心思。

写入核心技术栈声明

打开.cursorrules文件，第一行就要明确给出技术栈声明，这是AI理解项目性质的起点：

# 项目技术栈
技术栈:
- 前端: Vue 3 + TypeScript + Vite + Pinia
- UI库: Element Plus
- 路由: Vue Router

千万别说“使用Vue”，而要写“Vue 3 + TypeScript + Vite”这种精确表述。因为AI需要靠这些关键词来推断语法特性——写“Vue”可能触发Options API，写“Vue 3”才会启用<script setup>推断。

定义强制性编码规范

接下来用规则块约束AI的行为，每条规则前加“-”符号，保持缩进一致：

- 组件必须使用<script setup>语法糖，禁止生成export default { ... }形式的Options API代码
- 所有.vue文件必须包含、<script setup lang="ts"></script>、三部分，缺一不可
- Props接口必须用interface定义，并导出，命名以Props结尾（如UserProfileProps）
- 组合式函数统一以use开头（如useUserList），且每个函数只处理单一职责

这里第三条属于关键红线：

——如果写成type或者不导出，Pinia store或父组件调用时就会丢失类型信息，TS检查直接报错。

设置目录结构约束

让AI清楚知道新组件、API、Store应该放在哪里，避免它随手新建文件夹。

# 目录结构规范
src/
├── views/      # 页面级组件，每个文件对应一个路由
├── components/ # 可复用业务组件
├── composables/ # 组合式函数（useXXX）
├── stores/     # Pinia store，按模块拆分（user.store.ts、order.store.ts）
├── api/        # 封装的请求函数，按领域分组（user.api.ts、order.api.ts）
└── router/     # 路由配置，含权限守卫逻辑

在项目根目录新建.cursor/rules/目录，再创建vue-structure.rule文件，内容为：

Rule Type: Always
Rule Content:
```yaml
directory_constraints:
  src/views: "页面组件，需配合路由定义"
  src/components: "原子化可复用组件，禁止含业务逻辑"
```

如果项目用的是老版本Cursor，选方法一；若已升级到支持新版规则系统的版本，方法二能触发更精准的路径建议。

添加TypeScript强类型要求

- 禁止使用any，必须用unknown+类型守卫，或明确接口类型

- ref变量命名用小驼峰（如userInfo），reactive对象命名也用小驼峰（如formState）
- computed必须标注返回类型，例如：const fullName = computed(() => …)

- API调用必须用try/catch包裹，catch块内必须调用error提示函数（如ElMessage.error）或抛出自定义错误

这三条叠加后，AI生成的代码才能通过TS严格模式校验。漏掉任意一条，都可能导致后续CI流水线失败。