Cursor3 在实际项目中的应用思路

课堂目标

了解Cursor 擅长什么
Cursor 在简单项目中的应用思路
Cursor 在常规项目中的应用思路
Cursor 在非常规项目中的应用思路

1-Cursor 擅长什么

Cursor开发项目的基本理念是：Cursor 适合做的Cursor 做；Cursor不适合做的，自己做。

Cursor 擅长快速原型、全栈 Demo、中小型项目、日常增删改查、辅助调试；

但不适合超大项目、核心架构、像素级 UI、底层高性能、强安全合规、无监督遗留改造、简单问题复杂化、离线私有依赖。

详情参考链接：juejin.cn/post/764548...

2-Cursor 在简单项目中的应用思路

假设有一个比较简单的Web前端项目，其开发要求也很松弛。

我们可以使用Cursor，用多种方式开发这个项目：

按照网址生成页面。
按照UI 图片生成页面。
直接写提示词，如：

less 复制代码

请帮我生成一个常规个人主页，单页、响应式、现代简约风格，用 HTML + Tailwind CSS CDN + 原生 JS。包含：
顶部固定导航栏：首页、关于我、作品集、联系我；
英雄区（Hero）：头像（圆形）、姓名、一句话简介、社交图标（GitHub / 邮箱 / 微信）；
关于我：简短自我介绍、技能标签；
作品集：3 个卡片布局，图片占位、标题、简介；
联系我：邮箱、微信、留言表单（纯前端）；
页脚：版权信息；
平滑滚动、导航栏滚动变色、移动端汉堡菜单；
配色：主色 #2563eb，中性色白 / 浅灰 / 深灰；
所有代码放在 index.html 里，外部资源用 CDN，不要用 npm 包。

3-Cursor 在常规项目中的应用思路

我这里说的常规项目指的是公司里开发的那种常规项目，其功能比较常见，需要团队协作。

比如公司的用户管理系统，它会用到比较常规的表格、表单，业务逻辑也很常规。

Cursor 在常规项目中的开发要严谨一些。

3-1-固定Cursor 规范

我们需要在项目建立一个让所有人都遵守的Cursor 规范。

在项目的根目录创建.cursor/rules/code-rule.mdc 文件。

以Vue3+TS 的Web前端项目为例，其code-rule.mdc 可以这么写：

yaml 复制代码

---
description: Vue3+TS项目编码规范
globs: ["**/*.vue","**/*.ts"] # 规则生效文件范围
---
# =====================项目基础信息=====================
项目技术栈：Vite + Vue3 + TypeScript + <script setup lang="ts> + Element Plus + Vue Router4 + Pinia + ElementPlusIconsVue
代码格式化遵循项目根目录 .prettierrc 配置，生成代码自动对齐规范，不自定义格式。
目录约定：遵循项目现有src目录规范，不私自新建文件夹。

# =====================强制编码规则【必须严格遵守】=====================
## 1、TS类型规则
1. 开启TS严格类型，所有入参、返回值、对象、接口全部定义interface/type，**严禁使用any**。
2. 页面用到的实体类型统一抽取到 src/types/对应模块.ts，禁止在vue页面内大量定义类型。
3. ref/reactive 主动标注泛型，如 const list = ref<EmpItem[]>([])。

## 2、Vue页面规范
1. 所有单文件组件统一使用 <script setup lang="ts"> 语法糖，废弃选项式API。
2. template标签内样式简洁，Element组件统一使用el-xxx原生组件，不随意封装全局组件（如需封装放到src/components）。
3. ElementPlus图标全部从 @element-plus/icons-vue 按需import引入，禁止全局挂载图标、字符串写法<el-icon :icon="xxx">。
示例：import { Search, Plus } from '@element-plus/icons-vue'

## 3、ElementPlus规范
1. 表单校验使用ElementPlus内置表单rules校验，校验规则统一在当前页面ref定义。
2. 弹窗el-dialog使用v-model绑定布尔值控制显隐，不操作DOM控制弹窗。
3. 表格el-table数据源绑定ref数组，分页、搜索逻辑分离。

## 4、Pinia规范
1. Pinia按业务模块拆分文件，一个业务模块对应src/stores/xxx.ts，禁止全部写在一个store。
2. state使用箭头函数返回对象，异步请求统一封装在actions中，页面不直接在setup写接口请求。
3. store用到的类型引入src/types，不在store内重复定义。

## 5、Router路由规范
1. 路由按业务模块化拆分至router/modules，统一在index.ts汇总引入。
2. 路由元信息meta需要补充字段时，提前扩展RouteMeta类型，TS不报错。
3. 路由守卫统一在router/index维护，页面不单独写路由拦截。

## 6、接口&请求规范
1. 所有接口请求统一写在 src/api/业务名.ts，使用项目已封装 src/utils/request 实例。
2. 后端返回JSON数据，优先生成TS接口类型，axios使用泛型约束返回值。
3. 页面禁止直接引入axios，必须调用api内封装好的函数。

## 7、工具&公共组件
1. 通用工具函数放到src/utils，重复逻辑抽离src/hooks。
2. 全局公共组件放置src/components，业务专属组件和页面同目录。

# =====================Cursor生成代码约束=====================
1. 生成代码自带简洁注释，关键逻辑添加单行注释，不冗余注释。
2. 生成后代码自动适配项目别名@/，代表src目录，不用相对路径../../。
3. 优化已有代码时：只优化语法、类型、规范，不改动原有业务逻辑与页面效果。
4. 修复报错：优先修复TS报错、Eslint报错，给出修正后完整代码。

# =====================禁用项=====================
1. 不生成vue2语法、不引入jquery、原生DOM操作。
2. 不私自新增依赖包，如需安装包备注说明。

3-2-减少Cursor 检索范围

减少Cursor 检索范围可以调高Cursor 的运行速度。

在项目的根目录创建.cursorignore 文件。

以Vue3+TS 的Web前端项目为例，.cursorignore 可以这么写：

lua 复制代码

# Cursor 上下文忽略规则（语法同 .gitignore）
# 排除对 AI 编码帮助不大的大体积、生成物与敏感文件

# --- 依赖与锁文件 ---
node_modules/
package-lock.json
pnpm-lock.yaml
yarn.lock
bun.lockb

# --- 构建与类型检查产物 ---
dist/
dist-ssr/
*.tsbuildinfo

# --- 工具缓存 ---
.vite/
.cache/
.eslintcache
*.timestamp-*-*.mjs
node_modules/.vite/
node_modules/.tmp/

# --- 日志 ---
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# --- 测试与覆盖率 ---
coverage/
/cypress/videos/
/cypress/screenshots/
__screenshots__/

# --- 自动生成（unplugin-vue-components / auto-import）---
src/types/components.d.ts
src/types/auto-import.d.ts

# --- 环境与本地配置（避免泄露密钥）---
.env
.env.*
!.env.example

# --- Source map 与压缩产物 ---
*.map
*.min.js
*.min.css

# --- 编辑器与系统文件 ---
.vscode/
.idea/
.DS_Store
Thumbs.db
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# --- 二进制与静态资源（通常不需 AI 阅读）---
*.png
*.jpg
*.jpeg
*.gif
*.webp
*.ico
*.woff
*.woff2
*.ttf
*.eot
*.mp4
*.mp3
*.zip
*.pdf

3-3-规范提示词结构

通用结构：

css 复制代码

【目标】一句话要做什么
【约束】@code-rule.mdc + 技术栈 + 不要新增依赖
【范围】只创建/修改哪些文件
【接口约定】后端格式、Mock 地址（如有）
【验收】跑什么命令、看到什么结果
【禁止】不要做什么（避免 Agent 过度发挥）

示例：

diff 复制代码

请在本空目录初始化 Vue3 + TypeScript+ Element Plus +Pinia 项目。

约束：
- 遵循 @.cursor/rules/code-rule.mdc
- 使用 <script setup lang="ts">
- 不要安装 jQuery 等无关依赖

需要：
- package.json scripts: dev, build, type-check, lint, format
- src/main.ts、src/App.vue（仅 router-view 占位即可）
- tsconfig 开启 strict，路径别名 @ -> src

验收：npm install && npm run dev 能在 localhost 打开页面。
只完成脚手架，不要写业务页面和 Pinia。

3-4-写好提示词的技巧

1.分阶段、小步迭代，不要想着一步到位。

2.若中途参与项目的开发，需要先理解项目。

复制代码

解释这个项目。请为我指出主要的切入点、关键模块以及在做出更改之前应该阅读的任何内容。

3.写清「不要做什么」

bash 复制代码

实现登录相关模块：
1. src/types/user.ts --- LoginForm、LoginResult（含 token）等类型
2. src/api/user.ts --- POST /login，使用 request<T>()
3. src/stores/user.ts --- Pinia
约束：
- 页面不直接调 axios
- 严禁 any
- 遵循 @code-rule.mdc 和 @src/utils/request.ts 的响应格式
不要写 Login.vue，只写 types/api/user/store。

4.开发过程中，Ask 开发建议。

复制代码

在此项目中，提2个简单、安全的改进建议。等我选择一个。

5.大功能先 Plan。

复制代码

先列出实现员工新增 API 要改哪些文件，不要写代码

对齐后再 Agent 执行。

4-Cursor 在非常规项目中的应用思路

这里的非常规项目指的就是Cursor 不适合开发的项目。

对于一些比较复杂、灵活度较高、要求严格，或者你想保留自己的代码风格的项目，适合自己先搭框架，然后用Cursor 填充内容。

比如下面的panel 控制器，其功能灵活复杂，使用Cursor 会存在许多不可控因素，所以我更倾向于自己架构。至于panel 中要显示的内容，可以考虑用Cursor 生成。

对于其它不适合Cursor 开发的情况，需要视情况而定，我就不再举例了。

个人推荐的思路就是：Cursor 适合做的Cursor 做；Cursor不适合做的，自己做。

总结

这节课我们说了Cursor 在实际开发中的一些常见思路和技巧，更多应用经验，需要大家在实践中探索和积累。