为了让Cursor AI在Vue3项目中精准生成符合团队规范的代码，关键步骤是在项目根目录配置.cursorrules文件。否则，AI无法识别你使用的是Vue3、TypeScript还是Composition API，生成的代码往往与实际项目脱节——例如将defineProps()写成Options API的props: {}，导致编译直接报错。

因此，建议按照以下步骤一次性配置到位，后续开发效率将显著提升。

创建.cursorrules文件，明确基础技术栈

在项目根目录新建一个纯文本文件，命名为.cursorrules（注意文件名以英文点号开头，无后缀名）。使用任意编辑器打开，粘贴以下内容——当然，框架版本和库名需要根据实际项目调整：

# 技术栈约束
frameworks:
  - vue: 3.4+
  - ui: element-plus@2.4+
languages:
  - typescript: '>=5.1'
features:
  - composition-api: required
  - script-setup: required

这一步必不可少，否则AI默认按通用JavaScript逻辑补全，例如将defineProps()误写为Options API的props: {}，直接导致编译失败。这是常见错误，务必提前规避。

定义前端目录结构与文件命名规则

在.cursorrules文件末尾追加结构声明，让AI清晰理解“你的src下每个文件夹的用途”：

# 目录结构
src/
  views/: 页面级组件，文件名采用小写中划线，如 user-list.vue
  components/: 可复用原子组件，文件名采用PascalCase，如 UserProfileCard.vue
  composables/: 组合式函数，必须以use开头，如 useTablePagination.ts
  stores/: Pinia store，文件名采用小写中划线，如 user-store.ts
  api/: 请求封装，按模块分组，如 api/user/index.ts
  router/: 路由配置，仅包含 router/index.ts

注意：views/和components/的命名规则完全相反——前者强制小写中划线（便于URL映射），后者强制PascalCase（符合Vue组件注册要求）。若AI混淆这两条规则，生成的组件名会触发Vue运行时警告，届时仍需手动修正。

嵌入TypeScript与Composition API硬性规范

有两种方式，可任选其一或组合使用。

方法一：直接写入.cursorrules主文件

## TypeScript规范
- 禁止使用 any，必须用 unknown + 类型守卫或具体接口
- 所有 defineProps() 必须带泛型参数，如 defineProps<{ id: string; visible: boolean }>()
- 组件导出必须标注类型：export default defineComponent({}) as ComponentPublicInstance

方法二：为.vue文件单独设置规则（推荐）

在项目根目录新建.cursor/rules/vue-component.rules文件，内容如下：

filetype: .vue
rules:
  - 模板中所有绑定属性必须用双引号，如 :class="xxx"
  -