必须配置项目根目录下的.cursorrules文件，声明Vue 3+TS+Vite技术栈、强制<script setup>语法、三段式.vue结构、interface导出Props、use前缀组合式函数、规范目录路径及TS强类型要求。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Cursor中让AI生成的Vue代码严格遵循团队约定的目录结构、语法风格和组件规范，必须配置项目专属的.cursorrules文件，否则AI会按通用模板输出，导致后续大量手动调整。
创建并放置.cursorrules文件
在Vue项目根目录（即包含package.json和vite.config.ts的文件夹）下新建纯文本文件，命名为【.cursorrules】。注意：文件名开头是英文点号，不能写成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>推断。</script>
定义强制性编码规范
接下来用规则块约束AI行为，每条规则前加“-”符号，保持缩进一致：
- 组件必须使用<script setup>语法糖，禁止生成export default { ... }形式的Options API代码
- 所有.vue文件必须包含<template></template>、<script setup lang="ts"></script>、<style scoped></style>三部分，缺一不可
- Props接口必须用interface定义，并导出，命名以Props结尾（如UserProfileProps）
- 组合式函数统一以use开头（如useUserList），且每个函数只处理单一职责
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
这里第三条是关键红线：【Props接口必须用interface定义，并导出】——若写成type或不导出，Pinia store或父组件调用时会类型丢失，TS检查直接报错。
设置目录结构约束
让AI清楚知道该把新组件、API、Store放在哪，避免它随意新建文件夹：
方法一：用注释说明（兼容性最好，所有Cursor版本都支持）
# 目录结构规范
src/
├── views/ # 页面级组件，每个文件对应一个路由
├── components/ # 可复用业务组件
├── composables/ # 组合式函数（useXXX）
├── stores/ # Pinia store，按模块拆分（user.store.ts、order.store.ts）
├── api/ # 封装的请求函数，按领域分组（user.api.ts、order.api.ts）
└── router/ # 路由配置，含权限守卫逻辑
方法二：用新版.cursor/rules/目录（仅Cursor v0.42+支持）
在项目根目录新建.cursor/rules/目录，再创建vue-structure.rule文件，内容为：
Rule Type: Always
Rule Content:
```yaml
directory_constraints:
src/views: "页面组件，需配合路由定义"
src/components: "原子化可复用组件，禁止含业务逻辑"
```
如果项目用的是老版本Cursor，选方法一；若已升级，方法二能触发更精准的路径建议。
添加TypeScript强类型要求
第一步：禁用any类型
- 禁止使用any，必须用unknown+类型守卫，或明确接口类型
第二步：定义响应式数据规范
- ref变量命名用小驼峰（如userInfo），reactive对象命名也用小驼峰（如formState）
- computed必须标注返回类型，例如：const fullName = computed<string>(() => …)
第三步：错误处理强制显式
- API调用必须用try/catch包裹，catch块内必须调用error提示函数（如ElMessage.error）或抛出自定义错误
这三条叠加后，AI生成的代码才能通过TS严格模式校验。漏掉任意一条，都可能导致后续CI流水线失败。
