前端使用 Cursor 的高效实践

近期承接了一个工期仅两周的项目，按传统人工开发方式难以按时交付。因此决定采用Cursor作为开发工具，由AI完成代码生成，人工负责审查与修正，最终顺利完成项目交付。以下是这次使用Cursor开发的经验总结

核心理念
Cursor的本质是让AI理解你的上下文，用得好不好，取决于你能否给AI提供足够精准的信息，以及能否把它的输出快速整合进工作流。

一、项目初始化：让 AI 认识你的代码库

配置 .cursorrules 文件（放在项目根目录）：

# 项目背景
这是一个 Vue 3 + TypeScript + Element Plus 的后台管理系统

# 技术栈约定
- 使用 Composition API + script setup
- 状态管理用 Pinia
- 请求封装在 src/api 目录，基于 axios
- 组件命名用 PascalCase，文件名用 kebab-case

# 代码风格
- 使用中文注释
- 接口类型定义放在 src/types 目录
- 禁止使用 any，必须显式声明类型

这个文件会被 Cursor 自动读取，后续所有对话都会带上这些上下文。

二、日常开发场景

场景 1：根据设计稿生成组件

示例一：生成页面

创建 [页面名称]，路由地址 /xxx/xxx

功能描述：
[用户视角描述页面做什么]

页面结构：
- 顶部：[搜索/筛选区]
- 中间：[内容区：表格/卡片/表单]
- 底部：[分页/操作按钮]

接口依赖：
- 列表接口：@src/api/xxx.ts 的 getList
- 详情接口：...

参考页面：@src/views/xxx/list.vue

Cursor 会生成完整的 .vue 文件，包含模板、逻辑、类型定义。

示例二：封装组件

封装 [组件名称] 组件

使用场景：
[在哪些地方使用，解决什么问题]

Props：
- propA: string, 必填, 用途说明
- propB: number, 选填, 默认值 10

Events：
- @change: 参数 (value: string), 触发时机

Slots：
- default: 用途
- header: 用途

示例用法：
<MyComponent :prop-a="xxx" @change="handleChange">
  <template #header>标题</template>
</MyComponent>

场景 2：基于现有代码扩展功能

实现用户新增表单，要求：
字段：
- 用户名：必填，4-20位字母数字
- 手机号：必填，11位手机号格式
- 邮箱：选填，邮箱格式
- 角色：必填，单选下拉，选项从 @src/api/role.ts 的 getRoleList 获取
- 状态：默认启用，开关组件

交互：
- 提交前校验，校验失败定位到第一个错误字段
- 提交调用 @src/api/user.ts 的 createUser
- 成功后关闭弹窗并刷新列表（emit 事件通知父组件）

参考 @src/components/role-form.vue 的代码风格

AI 会在原有代码基础上增量修改，保留你的代码风格。

场景 3：调试和问题排查

示例一

直接把报错信息粘贴到 Chat

这个组件报错了：
[Vue warn]: Maximum recursive updates exceeded...

相关代码是 @user-form.vue

帮我分析原因

示例二

@src/views/order/list.vue 存在问题：

现象：切换分页后，筛选条件被清空

预期：切换分页时保留当前筛选条件

复现步骤：
1. 输入订单号筛选
2. 点击第2页
3. 观察到订单号输入框被清空，请求参数也没带上

请只修复分页逻辑，不要改动其他代码

@ 符号可以引用项目中的文件，AI 会读取文件内容进行分析。

场景 4：重构代码

重构 @src/views/product/edit.vue 的价格计算逻辑：

当前问题：
- 价格计算散落在 3 个 watch 和 2 个方法里，难以追踪
- 存在重复计算，页面卡顿

目标：
- 抽取为 useProductPrice composable
- 用 computed 替代 watch，确保响应式依赖清晰
- 保持所有现有功能不变

不要动模板部分的代码

场景 5：对接接口

接口文档：
- 地址：POST /api/user/create
- 请求参数：{ name: string, age: number }
- 响应格式：{ code: 0, data: { id: number }, msg: string }

要求：
- 在 @src/api/user.ts 添加方法
- 类型定义放 @src/types/user.d.ts
- 错误统一由拦截器处理，这里只返回 data 部分

三、高阶用法

用 @ 引用多文件上下文

帮我实现用户编辑功能：
- 接口定义参考 @src/api/user.ts
- 表单组件参考 @src/components/user-form.vue 的风格
- 类型定义放到 @src/types/user.d.ts

这样生成的代码会与现有代码风格一致。

批量重构

把这 5 个页面的 loading 状态管理统一改成 useLoading hook：
@pages/user/list.vue
@pages/user/detail.vue
@pages/order/list.vue
...

四、提升效率的关键习惯

• 写清楚"不要做什么"
  AI 容易过度发挥，明确边界能减少返工。比如"只修改表单校验逻辑，不要动其他代码"。
• 分步骤给指令
  复杂功能拆成多轮对话。先让它生成数据结构，确认后再生成 UI，最后处理交互逻辑。
• 保留审查意识
  AI 生成的代码要快速扫一遍。常见问题包括：变量命名不符合项目规范、遗漏错误处理、类型定义过于宽松。
• 善用 Tab 补全
  写代码时 Cursor 会实时预测后续内容，Tab 键接受。这个功能在写重复性代码（如表单字段、接口调用）时效率极高。

五、避坑指南

1、把 Cursor 当成一个需要明确指令、熟悉你项目的实习生——你描述得越精准，它交付的质量越高。
2、把需求当 Bug 报告来写——现象、预期、上下文、约束，缺一不可