Easy-Vibe AI 编程工具实战指南从理解 IDE 与 AI IDE 到用 Trae 在本地完成贪吃蛇【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe导读本文是 Easy-VibeAI 原生产品构建者入门课程第一阶段「AI 编程工具介绍与使用」的完整技术指南。你将彻底搞清 IDE 与 AI IDE 的本质区别认识 Trae、Cursor、Antigravity 等主流 AI IDE 的定位差异并跟随一条从创建空文件夹、安装 Trae、侧边栏对话生成项目、运行调试到迭代美化的完整链路在本地亲手产出一个基于 React 的贪吃蛇游戏。学完之后你将掌握与专业程序员相似的本地开发工作流并具备用高质量提示词稳定驱动 AI Agent 完成编码任务的能力。一、先改变学习方式遇到问题先问 AI在进入工具讲解之前Easy-Vibe 首先强调一个贯穿全课程的思维转变把 AI 当成第一求助对象。无论是概念没听懂、工具不会装、命令不会写、程序报错还是不知道下一步该怎么做都应该先问 AI再自己动手尝试。传统编程学习中安装 Python、配置 Conda、解决 npm 安装失败通常的路径是打开搜索引擎找教程、按步骤操作、报错了再搜报错信息反复试错。在 AI 时代这条路径已经过时——任何操作都可以先问一遍 AI甚至让它直接帮你做不知道怎么安装环境直接在侧边栏问 AI我想写 Python帮我检查一下有没有安装 Python如果没有请帮我安装。网络卡住了安装依赖包时一直转圈或报错直接把错误丢给 AI下载失败了是不是网络问题能不能帮我换个国内镜像源命令记不住不必死记硬背 Git、Conda 命令直接说帮我创建一个新的虚拟环境名字叫 demo。AI 原生学习闭环AI 主动学习不是把任务丢给 AI、自己等结果而是让 AI 帮你缩短等待答案的时间把更多精力用在动手、验证和理解上。这套闭环可以复用到本课程乃至任何技能学习的每一章常见问题提问对照表你遇到的情况可以直接对 AI 说概念看不懂我没有编程基础请用生活中的类比解释什么是 API再给我一个最小示例。环境不会安装我使用 macOS想运行这个项目。请先检查需要哪些环境再一次只带我完成一步并解释这一步的作用。命令运行报错这是我执行的命令和完整报错。请先判断最可能的原因再给我最小修改方案如果信息不够请告诉我还要提供什么。不知道下一步做什么我的目标是做一个贪吃蛇目前已经能显示游戏画面。请告诉我接下来最小的一步以及完成标准。AI 写了代码但看不懂先不要继续改代码。请按模块解释刚才的修改每一部分解决了什么问题有多个方案不会选请根据我是初学者、希望快速做出可运行版本这两个条件对比方案 A 和 B并明确推荐一个。结果和预期不一样我希望页面是这样的……现在实际是这样的……。请比较差异先只修复最明显的一处。一个通用的提问模板我的目标是……我目前做到……我尝试了……实际结果或完整报错是……请先解释原因再告诉我下一步最小的操作。信息越具体AI 越容易给出真正适合你的回答。第一次回答没解决问题很正常把新结果继续发给它——这本身就是 AI 原生学习的一部分。二、为什么写代码需要环境与工具从试着写几行代码到做可长期维护的项目对环境和工具的要求完全不同。理论上用系统自带的记事本也能写代码但问题会立刻暴露代码全是黑色文字关键字、字符串、注释混在一起很难一眼看出结构没有智能提示每个单词都要完整手敲拼错一个字母就要反复检查文件多了就乱套十几个文件来回切换经常找不到要改的那一行出错只能靠猜程序崩了不知道哪里出问题只能一行行打印日志试错。因此你需要一款 IDE集成开发环境Integrated Development Environment。它把代码用不同颜色显示、输入时自动提示、文件按项目整理、还能一步步追踪错误让开发更高效、更少出错。IDE 的本质价值在于集成它将编辑器、编译器、调试器、文件管理器等软件开发所需工具整合到一个统一图形界面中提供一站式工作体验详见 IDE 基础文档。三、IDE 与 AI IDE本质区别在哪里普通 IDE 是一套工具箱普通 IDE如原生 VS Code本质上是工具箱你可以打开项目、写代码、运行、调试、装插件但前提是你自己知道要做什么、怎么做出错时自己读报错、自己排查出问题的那一行要加新页面自己找对应文件、自己写代码要配环境、打包项目自己查文档、按步骤操作。AI IDE 多了一位听得懂人话的工程师在 AI IDE 中你可以直接用大语言模型辅助编程与改文件直接说做一个登录页它生成基础代码结构把报错和相关代码发给它它先分析原因再给修改建议确认后让它自动创建新文件、批量改代码跨文件处理繁琐任务选中一段代码可以要求重构或加注释在侧边栏问这个项目是怎么设计的并通过文件名或整个项目指定引用范围用一句话完成新建文件、写代码、运行等复杂操作。最新版 VS Code 也已内置大模型助手可直接针对整个代码仓库、某个文件甚至某个函数对话也可以像在网页端一样把需求以 prompt 形式交给内置编程 Agent 自动执行。AI IDE 的五大核心能力代码生成与智能补全传统 IDE 靠敲几个字符补全变量名/函数名现代 AI IDE 可以只写几行伪代码或一句话需求就自动补全整个逻辑甚至直接生成大段完整代码块代码理解与问答能理解并回答关于某段代码、某个文件、乃至整个项目目录结构的问题代码重构与优化根据你的意图重写或优化某段代码的实现逻辑自动生成测试为函数和模块自动生成测试代码便于针对性验证Agent 式任务执行智能 Agent 能自动完成创建代码、打包、安装、运行、修改的完整流程在多数任务上可部分替代初级软件工程师。从源码结构看由于 VS Code 开源市面绝大多数 AI IDE 都在其基础上二次开发因此只要熟悉 VS Code 的基本用法迁移到任何 AI IDE 都无需重新学习。主流 AI IDE 生态速览不同 AI IDE 的差异集中在四个方面价格、可用模型部分先进模型可能受区域限制、Agent 能力智能程度与执行力、运行速度与性能。典型产品包括AI IDE定位与特点Trae字节跳动出品基于 VS Code支持 100 编程语言具备自然语言生成代码、自动调试、设计稿转 React/Vue 组件等能力另有 SOLO 模式支持后端代码生成与架构文档编写CursorAnysphere 出品专门构建于 VS Code 之上强化超大代码仓库与多文件协作场景Agent 能力强、更新频率高但价格偏高Pro 版约 20 美元/月AntigravityGoogle 于 2025 年 11 月随 Gemini 3 推出采用Agent-First开发模式Agent 可主动操作编辑器、终端、浏览器负责执行/规划/验证支持 Gemini 3 Pro、Claude Sonnet 4.5 等多模型切换Qoder阿里出品强调透明协作与上下文工程能力通过 Action Flow 将任务拆分为多步骤并实时追踪 AI 执行过程支持多模型动态路由适合中大型项目架构管理与老系统逆向工程分析CodeBuddy腾讯云出品突出中文指令支持与企业级合规能力提供代码补全、批量代码审查、多模型切换等特性AgentCraft可生成多文件代码并接入 API企业版支持私有化部署VS Code ClineCline 是 VS Code 的编程 Agent 插件可通过配置不同 API 端点灵活切换大模型支持多模态输入、MCP 工具扩展、成本监控所有操作执行前需用户确认KiroAWS 出品与 Amazon Bedrock 及 AWS 云服务深度集成支持 Claude、Nova 等模型在云原生应用开发Lambda、S3、DynamoDB场景具有独特优势提示若需使用 Anthropic Claude 系列模型可使用 Cursor、Kiro 或 Antigravity——这些 IDE 与 Anthropic 有官方合作或深度集成能提供更稳定的 Claude 使用体验。四、实战用 Trae 在本地从零打造贪吃蛇前面讲的是概念与差异接下来通过一次完整实战把抽象概念变成具体操作创建空文件夹 → 用 AI IDE 打开 → 在侧边栏对话让它用 React 从零做一款贪吃蛇。以下以 Trae 为例。4.1 Trae 是什么Trae 全名可理解为The Real AI Engineer是字节跳动开发的 AI 原生 IDE构建于 VS Code 之上——如果你已熟悉 VS Code无论界面布局还是基本操作都会感到熟悉。它的目标是成为开发者的智能编程伙伴从项目创建、代码编写、调试测试到部署陪伴整个开发工作流而非只是一个代码补全工具。从网页到本地的平滑迁移如果你之前在 z.ai 等网页 AI 编程平台开发过项目可以直接下载代码到本地用 Trae/Cursor 等 AI IDE 打开继续开发——保留之前的成果同时享受本地 IDE 更强的 AI 辅助能力。4.2 安装与版本选择Trae 分为国际版和国内版CN国际版需要能访问外网可使用 GPT-5 等最新海外模型国内版主要支持 GLM、Qwen、Kimi 等最新国产大模型。国际版下载https://www.trae.ai/国内版下载https://www.trae.cn/定价与使用方式国内版 CN强烈推荐初学者基础功能免费整体使用体验目前优于国际版无需外网。因用户量大高峰期可能需要排队等待国际版订阅价格约 3 美元/月可访问 GPT-5 等海外模型但需要能访问外网绑定第三方模型如果你已有 DeepSeek、通义千问、Kimi 等大模型 API Token可通过 Trae 的第三方模型配置功能接入主流云厂商阿里云、腾讯云、百度云等通常提供 Coding Plan 订阅购买后可以更具竞争力的价格调用其大模型 API既自由选模型又能控制成本。免费模型建议截至本指南写作时2026-02-12通过 OpenRouter 可免费体验stepfun/step-3.5-flash:free模型也可直接使用openrouter/free默认使用免费 LLM API 的模型选项在 Trae 的 Custom Model 配置中直接输入模型 ID 即可零成本体验 AI 编程。Coding Plan 说明这是云厂商推出的订阅制套餐购买后在约定周期内可高频甚至不限量调用该厂商大模型 API相当于包月套餐不必时刻盯着计费。推荐的国内 Coding Plan智谱 AIBigModel Planhttps://bigmodel.cn/glm-coding、火山引擎字节云 AI 套餐https://www.volcengine.com/activity/codingplan。接入步骤访问云厂商官网 → 注册登录 → 找到定价/Coding Plan页 → 选购套餐并支付 → 获得 API Key 或 Plan ID。4.3 认识 Trae 界面Trae 界面与 VS Code 非常相似左侧资源管理器、中间编辑区、右侧插件面板。右侧边栏就是 Copilot/Agent 交互窗口如果暂时看不到点击右上角侧边栏图标即可打开。打开侧边栏后可以看到Builder选项这就是 Agent 模式可理解为 z.ai 的本地版——它能帮你操作本地机器环境、安装运行环境、打开网页等。点击 Builder 后会出现两种模式Chat 模式主要用于与当前文件夹内代码对话或当作普通聊天模型使用通过左上角 File 菜单打开文件夹后Builder 生成/修改的文件只会落在该文件夹内Builder with MCP 模式为 Agent 提供更多可用工具如接入其他程序、查天气等。可以简单理解为MCP 让大模型更方便地调用各种外部工具。底部还有模型选择区点击可切换当前使用的大模型。国内版可选 Kimi k2、GLM 等国产模型国际版还可选 ChatGPT、Claude 等。不建议使用 Auto自动选模型模式——国际版建议用 Gemini 或 GPT国内版建议手动尝试 Kimi k2、Minimax、GLM 等。不同模型各有适用场景没有绝对优劣遇到卡壳可切换模型通过多次实测找到最适合自己的组合。4.4 第一步创建空文件夹并用 AI IDE 打开先准备一个干净的项目工作目录。以本节为例在本地新建空文件夹snake-game-react。然后打开已安装的 AI IDE在启动界面选择打开文件夹 / Open Folder导入这个空文件夹作为项目根目录或者直接把文件夹拖入 IDE 窗口。此时左侧资源管理器没有任何代码文件——我们从一个完全空白的项目状态开始。4.5 第二步侧边栏对话让 AI 用 React 设计贪吃蛇打开 AI 聊天侧边栏通常按CtrlL或点击右侧聊天图标在对话框中输入一个足够清晰的提示词请使用 React 实现贪吃蛇游戏包含键盘控制、吃到食物变长加分、撞墙或撞到自己显示游戏结束并可重新开始。实现后请帮我运行这个项目。如果遇到未安装的程序环境请自动安装缺失的环境。关键认知此时 AI 不只是聊天模型它能帮你操作本地机器环境——创建文件、安装依赖、执行运行命令。你只需用自然语言描述目标AI 会自动判断该执行哪些命令、如何组织代码。遇到问题AI 会在对话中展示报错与解决方案你继续对话即可修正不必自己记住所有命令细节。处理 Agent 中途暂停Agent 执行过程中有时会暂停等待你输入信息例如要求输入创建名称、按 Enter 确认执行命令或点击按钮确认命令。一般情况下直接按 Enter不确定时可以截图当前界面问大模型如何继续当 Agent 启动了服务贪吃蛇本身也是一种服务时你会看到类似命令 URL 的输出这意味着它在本地启动了一个服务访问对应 URL 即可打开游戏。因为服务需要持续运行Agent 会在此处暂停点击Skip按钮继续即可。过程中如果看到Run按钮需要点击确认或需要输入y确认安装照做即可。遇到看不懂的术语可以随时翻看本文附录的术语表或直接问 AI。若出现意外现象如撞墙不结束、点开始蛇不动把现象描述给侧边栏 Agent有报错就截图或复制报错给它多次尝试仍未解决时尝试切换模型。最终你将得到一个类似 z.ai 上的可运行结果。修改代码后可以点击右下角的对勾确认修改或点击Cancel撤销点击 2 files need review 可展开查看修改后的代码。所有 IDE Agent 都支持代码回滚——如果某次修改不满意回到输入框区域点击Revert按钮即可回退到修改前状态再重新编辑输入内容。4.6 第三步可选向 AI 追问代码实现细节当贪吃蛇正常运行后如果对前端或 React 不熟悉可以在同一对话窗口继续请 AI 以最通俗的方式讲解代码无需切换工具或刻意查文档。好的实践是先整体后细节例如请从上到下讲解这个贪吃蛇游戏是如何一步步动起来的尽量少用专业术语。然后根据回答继续追问关键点蛇身体的每一节在屏幕上是怎么记录的用的什么数据结构能举个例子吗 怎么控制每隔一段时间动一下是哪部分代码负责的 蛇吃到食物时做了哪些步骤吃到是在哪部分逻辑里判断的 撞墙和撞自己分别在代码哪些部分判断如果看到某个文件如SnakeGame.tsx完全不懂可以请 AI 分块讲解请按功能分块解释SnakeGame.tsx每一块大致负责什么用更简单的说法。这一轮对话中把每个听不懂的词都当作追问的入口你刚才说的状态是什么意思能举个生活里的例子吗这里的定时器主要起什么作用去掉它会怎样目标不是一次性记住所有概念而是先弄清三件事这个游戏有哪些核心数据蛇、食物、分数、游戏状态等、这些数据在什么时候变化移动时、吃食物时、游戏结束时、每一小段代码对应哪次变化。弄清这三点你就基本掌握了这段代码的主逻辑。4.7 第四步让 AI 把界面做得更好看初学者最容易犯的错是只说我想让界面更好看——这句话连人类设计师都无法执行AI 更不可能猜出你要的风格、要改的部位、是布局还是配色问题。要把模糊目标拆解为一系列具体、可执行的小需求。先给出一组总需求请帮我整体优化游戏界面游戏区域居中显示不要放在左上角背景换成更浅的颜色让蛇和食物更突出把分数放大并放在显眼位置整体以蓝色为主色调统一优化配色和按钮。如果希望游戏结束反馈更清晰再补充细节游戏结束时请在屏幕中央显示游戏结束下方放一个重新开始按钮可以重置游戏。AI 会根据描述直接修改 React 组件和样式保存后刷新浏览器即可看到新界面。如果仍有差距继续小步迭代把分数再放大一点颜色更醒目一些。 游戏区域再紧凑一些四周留一点白边。 把重新开始按钮改成蓝色圆角样式放在提示文字下方居中。期间若某次修改导致报错不必自己排查——把报错复制到对话窗口或简要说明这是我刚优化界面后出现的报错让 AI 结合当前项目上下文定位并修复。通过对话—刷新的循环你就能把一个可运行的 Demo 逐步打磨成界面清晰、交互流畅的小产品。4.8可选参考 z.ai 的项目结构对齐结果对 vibe coding 初学者而言最难的是不知道什么是最佳实践、什么样的结构最合适。解决办法是直接对齐模板z.ai 网页端可以查看代码其 README项目功能与技术结构介绍部分就提供了很好的结构参考。把这份 README 的完整内容复制粘贴到 Trae 侧边栏让 AI 基于 README 的结构修改本地代码最终就能得到与 z.ai 非常接近的页面设计效果。五、IDE 界面各区域功能详解AI IDE 的界面各有差异但多数遵循 VS Code 布局。各区域功能如下Title Bar标题栏显示文件名与窗口控制按钮Activity Bar活动栏用于切换文件、搜索等不同视图Side Bar侧边栏显示文件列表等具体内容Editor Groups编辑区写代码的核心区域Breadcrumbs面包屑导航显示文件路径支持快速跳转Minimap代码缩略图快速预览和定位代码位置Panel底部面板包含终端Terminal、输出Output等Status Bar状态栏显示当前环境状态当前文件语言、缩进、Git 分支、错误信息等。对 VS Code 更完整的界面剖析可参考 IDE 基础文档。六、如何与 AI 高效对话同样的 AI有人几句话就能得到可运行的项目有人聊很久结果却南辕北辙。差异往往不在谁更聪明而在于你的提问是否具体、是否分了步骤。下面从几个常见场景给出适合初学者的提问方法。6.1 说清需求从模糊想法到具体描述很多人初次用 AI 习惯说一句很笼统的话如帮我做个网页帮我写个小程序。此时 AI 只能猜你的意图。要让它真正理解你需要把脑中的想法拆解成几句话从四个维度补充细节告诉它用途不只说个人网站而说我想做一个只有一页的个人简介网页发给招聘负责人看告诉它大致需要的板块不需要技术术语只描述页面上要有哪些内容如页面分三块最上面是名字和一句自我介绍中间展示几段工作经历最下面放邮箱和微信号告诉它你的水平与限制我完全不会写代码请只用最简单的方式让我能直接复制到文件里用浏览器打开告诉它你希望以什么形式拿到结果请给我一份完整的、可以直接保存为index.html并在浏览器打开的代码。组合起来就是这样一段完整需求我完全不会写代码想做一个只有一页的个人简介网页发给招聘负责人看。 页面需要三个部分最上面一行是名字和一句自我介绍中间是几段工作经历最下面是邮箱和微信号。 请用最简单的方式实现让我能直接保存为index.html并用浏览器打开。6.2 控制节奏先跑起来再逐步复杂化完全零基础的用户最容易掉进的坑是一开始就想要一个很完整、功能很多的东西如帮我做一个像淘宝的网站做一个能注册登录下单的系统。结果往往是 AI 给出一大坨代码复制后要么打不开、要么到处报错最终只能放弃。更合适的策略是主动控制节奏让 AI 一步步跟着你走第一步先要最小示例——只验证一件事浏览器里能不能看到东西。请先给我一个最简单的示例只要浏览器里能看到这是我的主页这一行字就行。然后一步一步告诉我文件名该叫什么、怎么保存、怎么打开。第二步在此基础上慢慢加内容——确认我真的能看到那一行了之后再说在刚才的基础上帮我加一块工作经历区域把完整代码重新发给我不要只发改动的部分。第三步结构差不多成型后再考虑好不好看——现在页面能正常显示内容了。接下来帮我优化一下整体内容居中、标题更大一点、用舒服的字体。请给我更新后的完整代码。每加一点内容就运行一次确认真的发生了变化再让 AI 继续加。这样即使某一步出错也能快速退回上一个版本还能正常跑的状态而不是推翻重来。6.3 善用截图与复制不会描述就把所见丢给 AI很多零基础用户的困难不在于不会改代码而在于不知道怎么把问题说清楚浏览器突然冒出一堆看不懂的英文报错页面排版不对但想不出该用什么词描述。这时最省力的办法是——把你看到的东西原样给 AI复制报错文本看到一串红色报错直接复制然后说这是运行后出现的完整报错。我看不懂这些英文请先用大白话解释它大概是什么意思然后告诉我现在最应该做的最小修改。给 AI 看截图感觉页面看着不对但说不出来可以截图当前页面 复制你用的完整代码然后说明这是页面现在的样子这是我现在的完整代码。我原本想要三栏布局现在变成一栏了。请帮我找出原因并给我一份改好的完整代码。⚠️注意并非所有 AI 模型都支持看图。纯文本大模型LLM只能处理文字输入无法识别图片内容多模态模型可以同时处理文字与图片。以 Trae 可用模型为例豆包-Seed 系列 ✅ 支持、GLM-4.7/4.6 ❌、MiniMax-M2.7/M2.5 ❌、DeepSeek-V3.1 ❌、Kimi-K2.5 ✅、Kimi-K2-0905 ❌、Qwen-3-Coder ❌、Gemini 系列 ✅、GPT 系列 ✅。想靠截图让 AI 排查界面问题时先确认当前模型支持图片输入不支持就用文字描述或粘贴报错文本。看到喜欢的网页想仿做不用纠结这种布局叫什么名字直接截图或复制该页面的标题与段落然后说我想做一个结构类似这样的页面不用完全一致。请用更简单的代码帮我搭一个相似的框架之后我自己替换文字。总之你负责把所见传给 AI用最简单的话说我希望它变成什么样至于翻译成代码、解释术语、找问题这些事全部交给 AI。6.4 当 AI 生成的代码不工作一套通用处理流程实践中一定会遇到AI 一本正经地给了代码你照抄后浏览器却一片空白或根本不是它说的效果。这不代表你学不会也不代表 AI 全错只是双方还需要几轮互相确认。按以下固定流程与 AI 对话先说清我做了什么 现在什么样避免只说打不开不行。示例打开后页面完全空白没有出现你说的那句欢迎语。 / 我打开了 xxx 页面里面没有你刚才说的那个部分没法用。把当前完整代码发给 AI很多时候问题出在少复制了一行、上次内容与这次混在一起。示例以下是我文件里现在的全部代码。请帮我对比看看有没有缺、写错或顺序不对的地方。请直接给我一份修正后的完整代码不要只发一小段。有报错就一并给出浏览器右上角报错、底部红字都算。可复制报错文本或截图然后说这是我看到的报错我完全看不懂请先用简单的方式解释大概是什么问题然后告诉我现在要改哪几行。请它用新手模式逐步讲解明确说明你的水平让它不要省略中间步骤我完全不会写代码请一步一步告诉我第 1 步改哪一行第 2 步怎么保存第 3 步怎么重新打开或刷新页面。每一步都用完整句子写清楚。最后请它给出应该看到什么的对照请先说一下按照你改好的代码我打开网页后正常情况下应该看到什么。按这套流程互动绝大多数代码不工作的问题都能在几轮对话内解决同时你会逐渐积累常见问题的类型下次遇到类似情况就能直接处理。七、术语附录高频计算机概念速查这份术语表按用到再查的方式组织遇到不认识的术语回来速查即可建议通读一遍建立初步印象。工具界面类IDE集成开发环境相当于程序员的工作台——既有写作的桌面编辑器又有电源插座和按钮运行、调试抽屉里还有各种小工具搜索、版本管理。VS Code、Trae、Cursor 都是 IDE 或其衍生工具编辑器Editor接近高级记事本负责让你写代码、用颜色区分不同内容语法高亮、提供自动补全终端 / 命令行Terminal黑底白字的窗口在里面输入命令让电脑执行任务。例如npm run dev表示帮我启动开发服务器python main.py表示运行这个 Python 文件活动栏Activity Bar最左侧一列小图标类似功能标签页点文件图标显示文件列表点放大镜变成搜索窗点 Git 图标显示版本管理侧边栏Side Bar活动栏右侧的大区域显示当前模式的内容文件列表、搜索结果、改动文件列表编辑区Editor中间最大的区域打开文件后在此查看与编辑顶部 Tab 代表当前打开的文件底部面板Panel通常位于底部常见类型包括终端Terminal输入命令运行项目、问题Problems列出有错误的文件与行号、输出Output工具打印的运行信息、调试控制台Debug Console调试过程的输出状态栏Status Bar底部细条显示当前文件语言JS/HTML/Python 等、缩进是2 空格还是 4 空格、是否有错误、当前 Git 分支——相当于编辑环境当前状态的迷你报告。网络与服务类URL网址浏览器地址栏里那串字符如https://www.trae.cn/、http://localhost:3000/相当于互联网上某个房间的完整地址HTTP / HTTPS网址开头的传输方式HTTPS 多一层加密、更安全端口Port把电脑比作大楼端口就是房间号:3000代表 3000 号房间同一台电脑可以同时跑多个服务各占不同端口。http://localhost:3000意为访问我这台电脑上 3000 号房间里的服务本地localhost指你自己的电脑。访问http://localhost:3000实际是在访问本机运行的程序而不是上互联网找别人的服务器服务Service/Server后台持续运行、随时等待你指令的程序。网页服务在浏览器访问某地址时返回网页内容在终端执行npm run dev运行项目本质上就是开启一个本地网页服务。前后端与数据类前端Frontend用户看得见、点得到的部分——网页上的按钮、文字、图片、动画用 React/Vue 等实现的页面后端Backend用户看不见、跑在服务器上的部分——存储与读写数据用户信息、订单、分数、执行业务规则登录校验、权限校验API应用程序接口前后端之间约定好的提问回答规则前端说我用这个地址、这种格式来问你后端说我用这种格式把结果返回给你请求Request前端发给后端的问题包含请求发往哪里URL、用什么方式GET、POST 等、带什么参数如用户 ID响应Response后端给前端的回答——状态码200 成功、404 不存在、500 服务器错误和实际数据多为 JSONJSON一种长得非常像 JavaScript 代码的数据表示格式是前后端交换数据最常用的格式如{name: Alice, score: 120}。写代码类变量Variable贴在数据上的标签——把分数存在score里之后用score这个名字就能读写这份数据let score 0 score score 10标识符Identifier所有你自己起的名字的总称——变量名score、函数名moveSnake、组件名SnakeGame就像给文件夹起名一样用于区分代码中不同的东西状态State程序当前的主状态记录——游戏是否结束、蛇现在在哪些格子、当前多少分。在 React 中通常的理解是状态一变界面就要跟着更新函数Function把可以反复做的一件事打包并起个名字function sayHello(name) { console.log(Hello, name) }之后写sayHello(Bob)就等价于再次执行这些代码组件Component前端里一小块可复用的界面小逻辑——按钮可以是组件、顶部导航栏可以是组件、整个游戏区域也可以是组件组件可以像搭乐高一样拼装模块Module由一组相关代码组成的文件——snakeLogic.ts专门放蛇怎么移动的代码score.ts放计分代码模块之间可以导入/导出就像不同抽屉里的工具语法Syntax某门编程语言的语法规则和标点——字符串要加引号、句子末尾是否加分号、代码块要加大括号{}。语法写错编译器/解释器会直接报语法错误编程语言Programming Language与电脑交流的一整套规则与词汇如 JavaScript、Python、Java、C、Go——不同语言适合的任务、写法、工具环境各不相同框架Framework别人帮你把地基搭好的大段代码与模式——前端如 React、Vue帮你处理界面更新、状态管理后端如 Django、Spring Boot。你基本是在现成的架子上填内容比从零造轮子省力得多。调试与排错类Bug程序错误程序行为与预期不符该出现的按钮没出现、该加 10 分多加了一堆、一打开就是白屏报错信息Error Message程序出错后屏幕/终端上那段看起来很吓人的英文通常告诉你在哪出错、该检查哪个文件的哪一行——直接复制给 AI 翻译分析即可日志Log程序运行中自己说的话。前端最常见的是console.log(当前分数, score)即在关键步骤主动报数便于确认程序按预期进行。console可理解为一块调试用的小黑板.log意为在小黑板上写一行字浏览器按F12打开开发者工具的 Console 面板即可看到输出调试Debug程序出问题时不要瞎改而是在某一行动态暂停断点→ 查看各变量当前值 → 一步步前进观察从哪一步开始不对劲断点Breakpoint在某行插入的暂停按钮——程序正常运行到断点行会暂停等你检查单步执行Step停在断点后可以逐行往下执行step over或进入某个函数内部看细节step into快照Snapshot某个时间点上对当前状态拍一张照方便日后对比——在实际工具中可能指提交Commit那一刻项目的完整状态或调试中某一时刻的内存/变量概况。项目管理类项目Project为实现某个应用放在同一文件夹里的全部内容——源码文件、配置文件、资源图片、音频等工作区WorkspaceVS Code/Trae 用来描述本次打开了一组什么东西的概念打开一个文件夹就是一个简单工作区也可以把多个文件夹组合成多项目工作区Git版本控制工具项目的时光机——每次改完一批内容可以拍一张版本合照之后需要时能回到任意历史状态仓库Repository/Repo启用 Git 后带有版本历史的项目文件夹就叫仓库提交Commit每次觉得这批改动算一个阶段性成果时写一句描述如Add score panel把当前所有改动打包成一个版本让 Git 保存这个动作就叫提交。AI 工具类AI IDE在普通 IDE 基础上加了一层能听懂人话、能自主干活的 AI——你说做个贪吃蛇它帮你建项目写代码你给它报错截图它先解释再尝试修复它能同时改多个文件而不只是逐行补全Agent智能代理可以想象成一个随叫随到的 AI 工程师——它读你的项目结构、拆解任务先装依赖、再生成代码、再运行项目、运行出错时根据报错调整计划SOLO 模式以 Trae 为例你只需说清终点它自己规划路径并在本地一步步执行只在关键节点停下问你是否继续模型Model这里特指大语言模型可以简单理解为后台海量的 AI 脑细胞——如 GPT、Claude、Kimi、GLM 等。不同模型在理解中文、写代码、逻辑推理上各有长短通常可以在 AI IDE 的下拉菜单中切换API Key一串很长的身份 ID 高级密码作用是告诉对方服务器我是某某用户请允许我使用你们的 AI 服务并按我的账户计费。注意这串字符通常由长串随机字母数字组成绝不能发到公开场合仓库、截图、群聊任何人拿到它都能冒用你的账户在工具中填入 API Key 相当于把钥匙插进锁孔之后工具就能帮你调用对应 AI 服务。浏览器与开发者工具类Chrome目前前端开发最常用的浏览器之一内置强大的开发者工具方便排查问题刷新Refresh/Reload重新加载当前网页。改完前端代码若没有热更新工具需手动刷新才能看到效果DevTools开发者工具浏览器内置的开发者面板集合——查看网页结构Elements、查看样式Styles、查看报错与日志Console、查看网络请求Network。Chrome 中通常按F12或CtrlShiftI打开Console控制台DevTools 中专门显示console.log(...)输出和运行时错误红字的标签页相当于程序的对讲机也是调试时看得最多的区域。遇到新术语的自助模板先写一句它是干什么的再写一句可以用什么打比方最后给一个很小很简单的例子。照此积累你的个人术语词典会越来越有用。八、总结与进阶任务本章你完成了从能在网页里玩 AI 生成的贪吃蛇到能借助 AI IDE 在本地独立做出一个小游戏的升级从三个层面建立了认知为什么离不开 IDE从记事本到 VS CodeIDE 通过集成编辑器、运行工具、调试器、文件管理极大降低编码与排错成本加了 AI 之后 IDE 变成了什么以 Trae、Cursor 为代表的 AI IDE 不再只是工具箱而是听得懂自然语言的见习工程师——帮你建文件、配环境、改代码界面不再陌生左侧文件、底部终端、中间编辑区、右侧 AI 面板各区域各司其职。更重要的是你完整跑通了一条工作流本地建空文件夹 → 用 AI IDE 打开 → 侧边栏描述需求 → 让 AI 生成项目并启动开发服务器 → 出问题时把现象 完整代码 报错截图发给 AI请它以新手模式一步步修复。过程中你还练习了更有效的提问方式说清目标、说清内容结构、说清自己的水平控制节奏从先跑起来到再变好看。课后挑战用本地 AI IDE 做一款更复杂的游戏完整走一遍描述需求 → 生成项目 → 本地运行 → 调试迭代选择一款比贪吃蛇更复杂的游戏俄罗斯方块、打地鼠、扫雷、2048、飞机大战等均可或自创一个简单的原创小游戏必须使用本地 AI IDE 完成全过程新建空文件夹并用 AI IDE 打开在侧边栏清晰描述游戏需求让 AI 生成文件、搭建项目结构、实现核心逻辑本地启动开发服务器并确认游戏正常运行必须具备可玩性与基本反馈至少包含开始、进行中、结束三种状态玩家有明确的操作方式键盘或鼠标屏幕上有清晰的分数或进度反馈至少进行两轮迭代第一轮让 AI 做出能玩的版本第二轮开始逐步提出具体改进样式、难度、交互优化等。完成之后你将自然过渡到下一阶段从会用工具转向构建用户真正想要的原型——从用户视角设计规则、交互与反馈再让 AI 帮你把想法变成产品原型。延伸阅读本章配套的 IDE 基础文档 深入剖析了 VS Code 的设计理念与核心组件有一定编程基础、希望提前使用更强工具的读者可参考 现代 CLI Coding 工具 了解命令行开发方式。仓库 examples/trae-block-game 与 examples/trae-3d-block-game 中保留了用自然语言提示词驱动 Trae 生成小游戏的真实产物提示词见 prompt.txt实现见 index.html可作为课后练习提示词 → 产物对应关系的直观参考。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考