自学教程

Cursor 入门教程

Vibe Coding 教程

Cursor 入门教程：零基础上手，用 Cursor 实践 Vibe Coding

Cursor 是目前最热门、最适合入门 Vibe Coding 的AI代码编辑器。它本质是套上AI能力的VS Code，上手门槛低，内置AI可以读取整个项目，跨文件新增、修改代码。
前面几篇我们聊了Vibe Coding的提示词、练习方法、Copilot、Claude Code、OpenCode智能体。如果你想真正体验氛围编程，Cursor 是首选入门工具。

⚠️ 重要提醒：Cursor生成代码会出现幻觉，可能写出看起来能跑、但暗藏bug或者安全隐患的代码。AI产出只做参考，所有代码都要人工审阅，本地运行测试；正式上线代码务必仔细审查，不能直接无脑采纳。

一、Cursor是什么，它和VS Code、Copilot有什么区别

很多人第一眼看到Cursor，会觉得它长得和VS Code几乎一模一样，快捷键、插件系统也基本兼容。

  • VS Code + Copilot：AI更多是局部助手，光标处补代码，选中片段对话；默认很难一次性感知全部项目上下文，跨文件改动能力弱。
  • Cursor：原生内置AI。AI能一次性读取整个项目目录，理解多个文件之间的依赖关系。你给一个需求，AI可以同时修改多个关联文件，自动新增文件，这就是Vibe Coding最核心的能力。

但Cursor不是全自动智能体（Agent）。默认模式下，是你主导项目，AI听你的指令干活。你定目标、划定边界、判断代码好坏；AI负责写代码、重构、修复bug。和OpenCode那种自主规划、自动跑命令的编码智能体不是一类。

一句话总结：
Copilot 是“在编辑器里帮你敲代码”；Cursor 是“AI直接参与整个项目的构建”，更适合从零搭建Demo、增量迭代开发。

二、下载安装，第一次打开Cursor

  1. 访问 Cursor 官网（https://cursor.com/），下载对应系统版本（Windows / Mac / Linux）
  2. 安装完成后打开，登录账号（需要邮箱注册）

免费额度：新账号会赠送免费的GPT-4o / Claude调用额度，足够用来入门练习。额度用完之后，要么订阅付费，也可以自己接入OpenAI / Anthropic API Key，用自己的模型额度。

  1. 打开本地项目文件夹
    文件 → 打开文件夹，一定要打开整个项目文件夹，而不是只打开单个文件！

这一步很多新手踩坑。只打开单独文件，AI看不到项目里其他代码、配置，上下文不足，很容易产生幻觉。打开整个文件夹，Cursor才拥有“读懂整个项目”的能力。

小提示：Cursor会默认读取文件夹内代码。如果有隐私文件、密钥.env、密码配置，Cursor默认会忽略.gitignore里的文件。建议把敏感配置写入gitignore，避免被AI读取。

三、Cursor 三大核心面板（Chat / Tab / Composer）

1. Chat（侧边聊天窗口，最常用）

侧边栏打开Chat面板。在这里和AI对话。
聊天有两种模式：

  • @整个项目 (@Project)：在消息里输入@Project，代表让AI读取整个项目代码。适合新增功能、跨文件修改、理解整体架构。

⚠️ @Project会检索项目文件，会消耗更多token，不要每一条消息都无脑带上@Project。小改动、单文件bug修复，不需要@Project。

  • @当前文件 (@File)：只把当前打开的文件交给AI。适合单文件修改，节省token。

常用操作：
选中一段代码，右键，选择“Add to Chat”，直接把选中代码发给AI，用来解释、重构、查bug。

2. Tab（行内补全，类似Copilot）

和Copilot的Tab补全一样，写代码到一半，灰色预览提示，按Tab接收。适合写样板代码、函数片段。
这个功能适合写小片段，不是Cursor的王牌能力。

3. Composer（作曲家，Vibe Coding的核心！）

这就是做Vibe Coding最主要的功能，新手一定要学会用Composer。
Composer 可以一次性根据你的需求，批量创建或者修改多个文件。
你输入需求+约束，点击执行。Cursor会先列出它计划改动的所有文件。
👉重点：它会先展示文件列表，你可以提前审核，如果发现它打算修改不该碰的文件，直接取消！
确认之后，才生成代码变更。变更会在编辑器里展示diff（红绿对比），你可以：

  • 接受全部改动（Accept All）
  • 逐个文件审阅，单个接受/拒绝
  • 全部拒绝（Reject All）

这就是Vibe Coding的标准工作流：AI先报改动清单，你审核范围，确认之后再应用代码。
Composer最适合：新建项目骨架、新增一个跨多个文件的模块、重构一组关联代码。

四、在Cursor里实践Vibe Coding，标准工作流程

记住这套流程，新手照着走，能避开绝大多数坑。

前提：项目目录已经用Git初始化。任何改动前，先提交基线快照，改崩随时回滚。

  1. 打开项目文件夹，打开Composer
  2. 写提示词：写清楚目标 + 技术栈 + 约束 + 禁止项（就是我们前面文章讲的Vibe提示词写法）

示例提示词：
新建一个Vue3+Vite的待办清单，使用Tailwind CSS。
功能：新增任务，勾选完成，删除任务，数据保存在localStorage。
约束：

  1. 不引入额外UI库
  2. 不做登录、后端、数据库
  3. 最小改动，组件拆分清晰
  4. 先列出要新增/修改的文件，等我确认之后再生成代码。
  1. 提交任务，Cursor输出计划修改的文件列表。仔细看列表，有没有不该被修改的文件。如果有，取消任务，重新写提示词，加上限制：禁止修改xxx目录。
  2. 确认，生成diff变更，逐一审阅红绿代码。不要直接点Accept All！快速浏览逻辑，检查有没有新增不必要依赖、奇怪的逻辑。
  3. 接受代码，保存文件，本地执行npm install、npm run dev，运行项目，手动测试功能。
  4. 出现报错 → 复制报错信息，回到Chat面板，带上@File或者@Project，让AI修复。修复优先要求最小改动，不重构无关代码。
  5. 功能跑通，确认没有明显bug → Git提交。
  6. 开启下一个增量需求，循环。

核心原则：增量开发，一次只做一件小事。不要一次性提巨大需求。

五、新手必学提示词模板，直接复制修改

✅模板1：新项目初始化（Composer用）

使用【技术栈】，创建【功能描述】。
要求：
1. 描述行为：【用户操作之后会发生什么】
2. 约束：【哪些库不能引入，哪些功能不要实现】
3. 代码风格：简洁，必要注释，合理拆分组件/模块
4. 先列出所有要创建的文件，确认后再生成代码。

✅模板2：修复bug（Chat面板）

问题现象：【描述发生了什么】
复现步骤：1.xxx 2.xxx
控制台报错：粘贴报错文本
要求：最小改动修复，不要重构无关代码，不要新增依赖。修复完成简单说明问题根源。

✅模板3：只重构，不加新功能（Composer / Chat）

本次只做代码重构，**不能新增任何功能，原有程序行为保持完全不变**。
优化目标：【可读性/减少重复代码/类型完善】
禁止新增依赖，不要修改业务逻辑。列出改动文件，确认后执行。

六、高频实用小技巧

  1. 善用“@”，不要滥用@Project
    简单bug修复，单文件调整，只用@File；只有跨多文件新增模块，才用@Project。每次@Project会扫描大量文件，消耗更多token，速度也会变慢。
  2. 学会拒绝改动
    Composer生成diff，看到不合理代码、新增不必要依赖，不要硬着头皮接受。直接Reject，重新写提示词，增加约束。你拥有最终决定权。
  3. 善用 .cursorrules 文件（非常推荐）
    在项目根目录新建.cursorrules。你可以把项目固定规则写进去。
    例如：技术栈规范、命名规范、禁止使用的库、代码风格、默认约束。之后每次对话，Cursor自动读取这个文件，不用每次提示词重复写一遍约束。
    示例 .cursorrules 内容：
本项目：Vue3 + Vite + Tailwind CSS
禁止引入Element、Ant Design等UI组件库
优先使用原生JS，非必要不新增npm依赖
改动遵循最小改动原则
不要自动增加深色模式、导出等未指定功能
所有组件拆分尽量简洁

有了.cursorrules，后续迭代的提示词可以写得更简短，减少重复文字。

  1. 不要让AI一次性做大规模重构
    哪怕Cursor能力很强，一次性重构整个项目，极容易引入隐性bug。大任务拆成多轮小Composer任务，做完一轮，测试+Git提交，再下一轮。
  2. 善用提问模式，先规划，不改代码
    如果不确定方案风险，可以先在Chat提问：

@Project，不要修改任何文件。帮我思考实现这个功能有哪些方案，每种方案优缺点。
评估方案之后，确认可行，再打开Composer写代码。

七、新手最容易踩的坑

  1. 只打开单个文件，不打开整个项目文件夹 → AI看不到上下文，疯狂幻觉。
    ✅对策：永远打开文件夹，不是打开文件。
  2. 看到diff直接Accept All，不审阅代码。
    很多新手一键全接受，结果引入一堆隐藏bug、多余依赖。
    ✅对策：养成习惯，逐文件快速过一遍diff。
  3. 需求写得很宏大：“帮我写一个电商网站”。
    一次性任务太大，AI生成的代码耦合严重，到处报错，最后项目直接烂尾。
    ✅对策：拆成MVP，一次一个小模块。
  4. 忘记Git备份。
    AI有可能改错核心逻辑，没有快照，出问题很难回滚。Git是安全底线，一定要用。
  5. 不加约束，AI主动“好心加码”，自动加上深色模式、导出、登录等你没要求的功能。
    ✅对策：提示词里明确写：不要实现xxx功能。或者写进.cursorrules。
  6. 把Cursor当成生产代码一键生成工具

Cursor适合快速写Demo、原型、学习练习。就算代码跑起来，上线前依然要完整测试、安全审计。

八、Cursor 和前面工具快速对比回顾

  • Cursor：入门首选Vibe工具，图形界面，Composer跨文件修改，上手简单，适合写前端Demo、原型。人主导开发。
  • GitHub Copilot：VSCode插件，局部补全，适合已有项目的日常开发。
  • Claude Code：终端工具，长文本理解强，适合研读老仓库、跨文件重构，无图形界面。
  • OpenCode Coding Agent：开源编码智能体，可以自主循环试错，自主性高，但风险更高，上手难度大。

你完全可以组合使用。用Cursor搭建项目骨架，开发原型；遇到复杂代码阅读和重构时，复制代码交给Claude Code；日常写小函数的时候，切回VS Code+Copilot。

写在最后

Cursor 是入门Vibe Coding最好的起点。
它的核心不是一键生成成品网站，而是改变你的开发方式：你负责定义需求、划定边界、评估方案；AI负责写代码、实现细节、修复bug。
学习Cursor，本质不是学快捷键，而是练习Vibe思维：需求拆解、提示词约束、增量迭代、代码审查、版本备份。
先从简单Todo清单这类小Demo练手，熟悉Composer、@Project、.cursorrules的用法。等你习惯了这种协作模式之后，再尝试更复杂项目，或者去体验Claude Code、OpenCode Agent。

标签：

0 条笔记