Cursor 小白入门教程：从零基础到全栈应用上线

作者：修BUG | 发布时间：

前十一分钟可以选择跳过，从十一分钟后开始进入真正教学内容

一、 为什么 Cursor 是目前最强大的 AI 编程工具？

  • 它是 VS Code 的“表亲”：Cursor 底层完全基于全球最流行的代码编辑器 VS Code 开发。这意味着你可以直接套用原有的快捷键、主题，并且完美兼容所有 VS Code 插件。

  • 真正的本地化与极高上限：像 Replit、v0 或 Lovable 这类纯网页工具（被比作简单的 Canvas），主要用来做简单的网站，且代码存在别人的服务器上。而 Cursor（被比作 Photoshop）是本地软件，代码完全存在你的电脑里。不仅能做网站，还能开发手机 App、桌面软件、3D 游戏，甚至是硬件驱动。你永远不会碰到“平台不支持”的技术天花板。

  • Cursor 2.0 的核心跃升：引入了全新的 Agent（智能体）模式，它不再只是被动回答问题，而是拥有了操作你电脑文件、运行终端命令、甚至自己打开浏览器查看网页截图的能力。

二、 零基础快速上手指南

  1. 如何建立你的第一个项目：

    • Cursor 没有花哨的“新建项目”向导。最标准的做法是：在你的电脑桌面上新建一个空文件夹（比如命名为 cursor_video），然后把它拖进 Cursor 窗口。这个空文件夹就是你的代码宇宙。

  2. 认识界面的三大区块：

    • 左侧文件树：用来管理文件。你可以直接把电脑里的图片（如 meme 模板）拖拽到这里建立 assets（资源）文件夹。

    • 中间代码区：阅读和修改代码的地方。

    • 右侧 AI 聊天框：你的主战场。通过快捷键 Ctrl/Cmd + L 唤起。

  3. 理解文件后缀与终端（Terminal）：

    • 在左侧新建文件时，后缀决定了文件性质（.py 是 Python，.txt 是文本，.md 是 Markdown 排版文件）。

    • 视频中演示了让 AI 写一个“猜数字游戏”。代码写完后，AI 会告诉你打开**终端（Terminal）**输入指令运行。终端就是你直接对电脑内核下达执行命令的地方。

三、 初级实战：用 Agent 模式生成数据落地页

  1. 选择模型与模式：在右侧聊天框顶部，选择 Agent 模式，模型可以选择速度极快的 Composer 或逻辑强大的 Claude 3.5 Sonnet。

  2. 输入提示词（Prompt）：

    • 示例：“请去网上搜索关于 Vibe Code 这家公司的信息，为我创建一个现代风格的落地页，完成后在我的本地运行起来。”

  3. AI 的自动化操作：

    • 此时 AI 会自动调用“网络搜索”工具抓取最新信息，接着新建 index.html 等文件编写代码。

    • 写完后，AI 会自动在你的本地终端启动一个服务器（如运行 localhost:8000）。

  4. 如何处理报错：

    • 如果打开浏览器发现是一片空白，不要慌，也不需要懂代码。直接在 Cursor 里对 AI 说：“为什么页面什么都没有显示？” AI 会自己检查运行日志并给出修复方案。

四、 进阶实战：开发“表情包（Meme）生成器”前端

我们要打造一个带有多文本框拖拽功能的图片编辑器。

  1. 使用 Plan Mode（计划模式）构建架构

    • 面对复杂需求，先切换到 Plan 模式。输入需求：“做一个表情包生成器，用户可以选择图片模板，在上面添加无限个白色黑边文字框，可以拖拽缩放，最后能下载。”

    • AI 不会立刻写代码，而是问你几个架构问题（用什么框架？用哪种编程语言？）。确认后，AI 会生成一个临时的 plan.md 规划文件。

    • 高阶技巧：在让 AI 正式动工（点击 Build）前，你可以手动修改这个 plan.md 文件（比如强制加上“文字默认颜色必须是蓝色”），AI 会严格按照你修改后的计划执行。

  2. 设定全局审美规则（Rules）

    • AI 默认特别喜欢用“蓝紫色渐变”和“Emoji表情”。

    • 按 Ctrl/Cmd + Shift + P 唤出命令面板，创建一个专属的 Rules 文件（如 styling.mdc）。

    • 在里面用大白话写下：“绝对不要使用紫色或蓝色渐变作为主色调，要求极简设计。任何回复或代码中都不允许出现 Emoji。” 此后 AI 就像被洗脑一样，完全遵循这种风格。

  3. 使用 @Browser 解决视觉排版 Bug

    • 实战中出现了“文字太长导致溢出屏幕”的 Bug。

    • 在聊天框输入 @Browser 并附上本地网址，对 AI 说：“看一眼浏览器里这段溢出的文字，帮我改成自动换行。”

    • Cursor 会直接给你的网页截一张图发给 AI，AI 通过“看图”瞬间理解了排版错乱的位置，并修改对应 CSS 代码。

  4. 多 Agent 并发调试（解决复杂交互逻辑）

    • 当遇到“新增第二个文本框时，会自动覆盖第一个文本框”这种棘手的交互 Bug 时。

    • 开启多 Agent 模式（需要高级订阅）：同时勾选 Sonnet 4.5、Composer 和最强大的 GPT-5 Codex。

    • 把 Bug 描述发给它们。此时三个 AI 会同时在后台思考并写出三套不同的修复代码。你可以分别点击每套方案的“应用（Apply）”去网页上测试。如果方案一不行，点击“撤销（Undo/Overwrite）”，再测试方案二，直到选出完美解决 Bug 的代码。

五、 高阶实战：接入 Instant DB 变身全栈应用

让表情包生成器拥有“账户登录”和“公共信息流（Feed）”功能。

  1. 利用 @Docs 喂饭式学习新技术

    • 我们要用极其轻量级的数据库 Instant DB。在聊天框输入 @Docs，粘贴 Instant DB 的官方说明文档网址。Cursor 会花几秒钟把整本说明书“吃透”。

  2. 全栈架构大重构（迁移至 Next.js）

    • 告诉 AI：“我现在要重构整个项目，请使用 Next.js 框架，并结合刚才学习的 Instant DB 作为数据库。加入用户身份验证功能，使用魔法链接（Magic Link，即向邮箱发送6位验证码）进行登录。”

  3. 理解数据库权限设置（Rules/Permissions）

    • AI 会帮你生成数据库的结构配置。这里有一个非常核心的逻辑：AI 会在代码中设定权限屏障。

    • 比如：定义 Memes（表情包）数据表时，允许所有人（无论是否登录）**查看（View）信息流；但只有登录的作者本人，才能拥有修改（Update）和删除（Delete）**这串数据的权限。

六、 部署上线：使用 Vercel 发布到公网

  1. 保存代码快照（Git Commit）

    • 你可以教 AI 设立一个快捷命令：每次在聊天框输入 /commit，AI 就会自动帮你把当前代码打包成一个版本快照，并自动写好修改日志（这就是 Git 的作用，相当于游戏存档）。

  2. 推送并部署

    • 让 AI 帮你把代码推送到云端仓库（GitHub）。

    • 在终端中告诉 AI：“使用 Vercel CLI 帮我把这个项目部署到线上。” * AI 会在终端运行 vercel login 让你登录账号。

  3. 环境变量（.env）的安全意识

    • 在部署过程中，系统会提示缺少“API Key”（这是你数据库的最高机密钥匙）。

    • 千万不要把 Key 直接写在代码里。AI 会帮你创建一个叫 .env.local 的隐藏环境变量文件，专门存放这些密码，并在部署时安全地传输给 Vercel 服务器。

    • 编译完成后，终端会吐出一个真实的网址（如 meme-generator.vercel.app），你的全栈产品就正式上线了！

七、 主流 AI 编程工具深度对比总结

  • Cursor：像 Photoshop。门槛稍微高一点点（需要理解终端、文件目录），分享代码需要自己配置部署。但它拥有极高的天花板、最灵活的模型选择和最便宜/可控的运行成本，是想长期掌握“用 AI 开发软件”这项技能的人的唯一首选。

  • v0 (Vercel) / Lovable：像 Canva。傻瓜式操作，UI 生成极其惊艳且迅速，自带一键分享链接。极其适合快速做静态落地页。缺点是严重依赖平台生态，后端数据库支持有限，一旦项目变得庞大复杂，很容易卡在某个 Bug 上无法推进，且难以将代码整体迁出。

  • Replit：拥有极其完善的云端运行环境，其内部 AI 模型思考得很慢，但给出的代码往往非常稳健。缺点是当 AI 疯狂思考陷入死循环时，由于计费机制，可能会导致极高的订阅/消耗账单。