← 返回首页ai798LAB Public

vibe-coding-课程-干货集训

01 开发工具及环境准备

2026年1月17日1. 作用：托管项目的代码仓库、版本管理、支持部署自动化。

Github

  1. 作用：托管项目的代码仓库、版本管理、支持部署自动化。
  2. 地址：https:github.com
  3. 注册流程
  4. 进入Github，点击「Sign Up」
  5. 点击「Continue with Google」，使用Google账号注册图片展示了GitHub注册页面。左侧为“Create your free account”标题，下方有“Explore GitHub's core features for individuals and organizations. See what's included”及一个紫色卡通形象。右侧是“Sign up for GitHub”页面，有“Continue with Google”和“Continue with Apple”按钮，下方有“Email”“Password”“Username”等输入框，其中“Password”和“Username”输入框被红色箭头指向，提示密码和用户名不能为空，且用户名只能包含字母、数字或单个连字符，不能以连字符开头或结尾。该图与文档中GitHub注册流程的上下文对应，直观呈现了注册时需注意的输入项。
  6. 可能有些验证题要做，正常做完即可
  7. ✅注册成功，进入Github图片展示的是GitHub的Dashboard界面。左侧为导航栏，显示用户头像、@

Vercel

  1. 作用：一个全栈项目部署平台，帮你快速部署上线
  2. 地址：https://vercel.com
  3. 注册流程
  4. 进入Vercel，点击「Sign Up」图片展示的是Vercel官网首页界面，背景有彩色渐变图案，上方有产品、资源等导航栏。右上角有“Log In”和明显偏亮突出的红色箭头指向的“Sign Up”按钮。下方有“Build and deploy on the AI Cloud.”等文字及“Start Deploying”“Get a Demo”按钮。该图片与上文Vercel注册流程中3.1步骤对应，直观呈现了进入Vercel官网后点击“Sign Up”进行注册的页面情况。
  5. 选择「I'm working on personal projects」，输入名称。进入下一步图片展示的是Vercel注册流程中选择项目类型及输入姓名的界面。上方提示“Your first deploy is just a sign-up away.”。下方有“Plan Type”选项，选中“个人项目”；下方有“Your Name”输入框，箭头指向该输入框。该图片与文档中Vercel注册流程的上下文对应，是注册流程中选择“个人项目”并输入姓名这一步骤的展示，帮助用户直观了解操作位置。
  6. 使用Github注册图片展示的是Vercel网站的注册页面。页面上方有“Vercel”标志，中间大标题为“Let's create your account”。下方有四个注册选项，分别是“Continue with Google”（用Google账号注册）、“Continue with GitHub”（用GitHub注册，有红色箭头指向）、“Continue with GitLab”（用GitLab注册）、“Continue with Bitbucket”（用Bitbucket注册）。底部还有“Continue with Email”（用邮箱注册）选项。该图片与文档中介绍Vercel注册流程的内容相关，直观呈现了使用GitHub注册的步骤。
  7. 完成Github授权图片展示的是Vercel注册流程中使用Github授权的界面。上方显示网址为github.com/login/oauth/select_account。中间部分有“Authorize Vercel”标题，下方提示从选项中选择要用于授权此应用的账户。下方有“Signed in as Sin10874”的账户选项，右侧有“Continue”按钮；下方还有“Use a different account”选项。该图片与文档中Vercel注册流程的上下文对应，是完成注册前使用Github授权的步骤展示。
  8. 完成注册，进入Vercel图片展示的是 addCriterion addCriterion addCriterionVercel平台的项目管理界面。左侧导航栏有Overview、Integrations等选项，当前选中Overview。右侧显示项目使用情况，如过去30天的CPU使用、图像优化等数据，还设有Alerts提醒功能，可自动监控项目并获取通知。下方有Recent Previews区域，展示了最近的预览记录 addCriterion addCriterion内容。该图片与文档中介绍Vercel注册流程后进入平台的内容相关，直观呈现了Vercel平台的项目管理界面，帮助用户了解后续操作环境。

Supabase

  1. 作用：支持云端数据库、用户认证、文件存储和实时数据增删改查等后端服务。
  2. 地址：https://supabase.com/
  3. 注册流程
  4. 访问Supabase，点击「Sign in」图片展示了Supabase官网首页。上方有导航栏，包括Product、Developers等选项。右上角有“Sign in”按钮，旁边有一个用户头像图标。图片中红色箭头指向“Sign in”按钮，提示用户点击进行登录操作。该图片与文档中“使用Supabase注册”步骤相关，对应步骤3.1，即访问Supabase后点击“Sign in”进行登录。
  5. 使用「Continue with Github」登陆图片展示的是Supabase登录页面。页面上方显示“Welcome back”及“Sign in to your account”，下方有“Continue with GitHub”和“Continue with SSO”两个登录选项，以及“Sign In”按钮。页面右上角有“Documentation”链接。页面左下角有“Don’t have an account? Sign Up Now”提示。图片对应文档中“使用Github注册”步骤，直观呈现了使用GitHub登录Supabase的操作界面。
  6. 登陆成功，进入Supabase图片展示的是Supabase平台的组织管理页面。页面上方显示“Your Organizations”，下方有一个搜索框，可搜索组织。左侧有一个名为“Sin10874's Org”的组织，标注为“Free Plan”且有“1 project”。右侧有一个绿色的“New organization”按钮。页面底部有“Accept”“Opt out”“Privacy settings”三个按钮，以及关于使用cookies收集数据和改进服务的提示。该图片与文档中“Supabase注册流程”上下文对应，展示了登陆成功后进入的组织管理页面。

Node.js

  1. 解释：简单来说，Node.js 让 JavaScript 这门原本只能在浏览器里运行的语言，也能在你的电脑（服务器）上运行。它是我们后续所有开发工作的基础。
  2. 安装步骤
  3. 打开Node.js官网
  4. 下载安装包（网站会自动识别你的设备）图片展示的是Node.js官网下载页面。页面上方有“学习”“下载”“博客”“文档”“贡献”“认证”等导航栏。中间部分有“获取适用于macOS且使用npm的Node.js v24.11.1 (673)”字样，下方有绿色的“复制安装命令”按钮，以及适用于macOS、ARM64等平台的Node.js代码。页面底部有“Mac Stadium”“Vercel”“Cloudflare”等合作伙伴标识。该图片与文档中“安装步骤”部分的2.1步骤对应，直观呈现了下载页面及获取安装命令的操作指引。
  5. 复制安装命令
  6. 打开Terminal（终端） 1. Mac: 按 Command + 空格，搜索"终端" 2. Windows: 按 Win + R，输入"PowerShell"
  7. 粘贴命令按回车执行图片展示了在Mac终端执行nvm安装Node.js版本后的输出结果。显示了下载、克隆、压缩等Git操作进度，以及nvm源字符串添加到.zshrc文件等信息。还列出了安装的模块，如anthropic - ai / claude - code - 0.2.0.53、vercel / 0.2.9、vercel / 0.2.9等。最后给出卸载模块的命令示例，以及关闭并重新打开终端以使用nvm的提示。该图片与文档中2.5步骤对应，直观呈现了安装后的终端反馈情况。
  8. 安装完成后，查看版本

图片展示了在Mac终端中查看Node.js版本的界面。终端显示当前用户为xinzechao，登录时间为Fri Nov 28 13:12:27，终端窗口大小为80x24。在提示符后输入“node -v”命令并按回车执行，终端返回Node.js版本号“v22.19.0”。该图片与文档中“安装完成后，查看版本”步骤对应，直观呈现了查看Node.js版本的操作结果。

代码编辑器

Cursor

  1. 介绍：Cursor是一个继承了强大的AI辅助编程能力的编程工具（IDE），能通过对话完成多种编程任务
  2. 优势 1. 不需要编程基础，可通过自然对话开发应用 2. 支持调用多种模型，可以根据不同的编程任务选择适合的模型（比如Gemini审美好，负责写前端；Claude逻辑强，负责写后端） 3. 支持支付宝付款，不需要额外办海外卡
  3. 劣势 1. Token额度消耗快，$20很快用完
  4. 安装步骤
  5. 访问 Cursor官网
  6. 安装包体图片展示了Cursor软件的安装包体界面。上方有“功能”“企业”“定价”“资源”等导航栏，右上角有“登录”“下载”按钮。下方文字介绍Cursor是与AI协同编程的最佳方式。画面中突出显示“为macOS下载”按钮，箭头指向该按钮。此图对应文档中“安装步骤”部分，是Cursor安装包体下载的指引，帮助用户在Cursor官网找到并下载macOS版本的安装包。
  7. 打开Cursor，选择Google账号/Github登录图片展示了Cursor开发工具的登录界面。界面中央有Cursor的标志及“Sign in”字样，下方有三个选项卡，分别是“Open project”（打开项目）、“Clone repo”（克隆仓库）和“Connect via SSH”（通过SSH连接）。界面背景为深色，整体设计简洁。该图片与文档中介绍Cursor开发工具的内容相关，直观呈现了Cursor登录时的界面样式及可进行的操作选项。图片展示了Cursor开发工具的登录界面。界面上方显示“Welcome to Cursor”，下方有“使用Google继续”“使用GitHub继续”“使用Apple继续”三个选项，其中“使用Google继续”被红色箭头突出指向。界面底部有“您的邮箱地址”输入框和“继续”按钮。该图片对应文档中“Cursor安装步骤”部分，直观呈现了打开Cursor后选择登录方式的界面情况，帮助用户了解登录流程。

Trae

  1. 介绍：Trae是字节系的开发工具，AI Coding的综合能力在国内IDE工具中处于第一梯队
  2. 优势 1. 免费可用 2. 无需VPN
  3. 劣势 1. 编程速度比较慢，需要调试和等待的时间成本稍高 2. 对于连续多轮的复杂开发任务，编程质量不如在Cursor上使用Claude或Gemini
  4. 安装步骤
  5. 访问Trae官网
  6. 安装包体图片展示的是字节系开发工具Trae的官网页面。页面背景为黑色，左侧有“TRAE”标识及“TRAE SOLO 独立注册”“一键体验”字样，右侧有“登录”“下载 IDE”按钮。中间大字“TRAE，一个能理解需求、调动工具、独立完成各类开发任务的超级 AI 开发工程师，助你高效推进项目每一步”突出显示，下方有“立即获取 TRAE IDE”“立即探索 SOLO”按钮。该图片与文档中介绍Trae的内容相关，直观呈现了Trae的官网界面。
  7. 登陆Trae图片展示了字节系开发工具Trae的界面。左侧为文件管理区域，显示了“打开工作区”“新建项目”“连接远程主机”“新建文件”等选项，当前选中“新建文件”，下方有“vibe_calculator_ios”和“vibe_calculator”两个文件夹。右侧是Trae主界面，上方有“与Builder协作”及“启动优化代码开发任务，编到高亮完成，提高交付效率”字样，下方有“@Builder”聊天框，底部有“#”“Auto”“CUE”按钮。该图与文档中介绍Trae安装步骤后登陆的内容相关，直观呈现了Trae的界面样式。

VS Code

  1. 介绍：功能强大的开发工具，有丰富的开发扩展应用解决各种编程问题
  2. 优势 1. 继承了丰富多样的扩展应用，能在VS Code中快捷调用解决问题 2. Claude Code for VScode做的很好，可以在VS Code里使用claude code多窗口进行开发或其他任务
  3. 劣势 1. 很多扩展应用（如cc for vscode）的使用都需要VPN
  4. 安装步骤
  5. 访问VS Code官网
  6. 安装包体图片展示了Visual Studio Code官网页面。页面上方有导航栏，包括Docs、Updates、Blog、API、Extensions、MCP、FAQ等选项。右上角有搜索图标和下载按钮。页面中间大标题为“The open source AI code editor”，下方有“Download for macOS”按钮，旁边有红色箭头指向。下方还展示了VS Code界面截图，显示了代码编辑区域及一些功能按钮。该图片与文档中介绍VS Code作为功能强大开发工具的内容相关，直观呈现了VS Code官网及界面样式。
  7. 登陆VS Code图片展示了Visual Studio Code（VS Code）的欢迎界面。界面左侧有多个图标，包括文件、搜索、代码、终端等。右侧上方显示“欢迎”及“编辑进化”字样，下方“开始”部分有“新建文件”“打开”“克隆Git仓库”等选项；“走向”部分有“使用容器工具开始”等引导内容；“最近”部分显示了多个项目文件夹。界面底部有“在启动时显示欢迎页面”选项及“完成安装”按钮。该图片与文档中介绍VS Code安装步骤的内容相关，直观呈现了VS Code的初始界面。

pnpm

  1. 介绍：pnpm 是一个 JavaScript/Node.js 的包管理工具
  2. 优势 1. 省硬盘空间 — 多个项目用同一个包时，只存一份，其他地方用链接指向它 2. 安装速度快 — 比 npm 快很多 3. 更安全 — 项目只能访问自己声明的依赖
  3. 安装步骤
  4. 打开终端（Terminal），输入：
node -v
  1. 在终端中输入
npm install -g pnpm
  1. 验证安装是否成功，在终端输入
pnpm -v
  1. 成功则会展示图片展示了在终端中安装pnpm及验证安装成功的过程。先是显示了node版本号，接着执行npm install -g pnpm命令安装pnpm，耗时14秒，系统提示有1个包在寻求资金支持。最后运行pnpm -v命令，显示pnpm版本号为10.24.0。这幅图与文档中“pnpm安装步骤”的上下文对应，直观呈现了文档中2.4步骤验证安装成功后展示的内容。