Lesson 03

Vibecoding 基础概念速查

不用一次全记住。这节课是字典，后面课遇到词回来翻。每个概念一句话定义 + 一个类比 + Vibecoding 里你会在哪里碰到它。

怎么用这节课 · 先通读一遍，有个印象就行。真正搞懂一个词是靠后面几课反复见到它。遇到听不懂的词，回来搜（Ctrl/Cmd + F）。

A 部分 · 你坐在哪里敲字

1

终端 / Terminal

一个只能用键盘、没有鼠标的黑底白字窗口。你在里面一行一行敲命令，电脑一行一行给你回。

类比 · 和电脑用短信聊天，你发一句命令，它回一段结果。

Vibecoding 里 · 你和 Claude Code 对话就在这里面。macOS 叫「终端 / Terminal」，Windows 叫「PowerShell」或「Git Bash」。

2

命令 / Command

在终端里敲的一行字，回车后电脑执行。前面是「干啥」，后面是「对谁 / 怎么干」。

npm install react
│    │       │
│    │       └─ 参数：装哪个包
│    └───────── 子命令：install = 安装
└────────────── 程序：npm
3

目录 / 文件夹 / 路径 (Path)

文件住在一层一层的文件夹里。路径就是这个文件的「家庭住址」。

  • /Users/you/projects/myapp — macOS / Linux 绝对路径
  • C:\Users\you\projects\myapp — Windows 绝对路径
  • ./src/app.js — 相对路径，. 表示「当前位置」

常用命令：cd 文件夹名 进去，cd .. 退一层，pwd 显示「我现在在哪」。

4

编辑器 / IDE

写代码专用的记事本。会高亮颜色、自动补全、能跳转。Vibecoding 里推荐 Cursor 或 VS Code。

你完全可以只在终端和 Claude Code 对话，让它改代码、然后在编辑器里看一眼结果。

B 部分 · 程序长什么样

5

前端 / Frontend

用户眼睛能看到、手能点到的那一层。网页、App 里的按钮、图片、文字。

类比 · 餐厅里的服务员和菜单。客人直接打交道的部分。

技术上通常跑在浏览器里，主要语言是 HTML / CSS / JavaScript。

6

后端 / Backend

用户看不到的幕后。处理登录、存数据、算账、调其他服务。

类比 · 餐厅的厨房。客人点了菜，后厨做好送出来。

技术上跑在服务器上，语言很多：Node.js、Python、Go、Java……

7

服务器 / Server

一台 7×24 小时开着的电脑，专门等别人来访问。你用的网站、App 背后都有一堆服务器在跑。

Vibecoding 里你一般不用自己买服务器 —— 丢给 Vercel、Cloudflare 这类平台就行。

8

域名 / Domain

wavecraft.ai 这种好记的网址。背后其实是一串 IP 地址，域名只是「贴在门上的名片」。

要自己上线产品，先去域名商（阿里云 / Cloudflare / Namecheap）买一个，几十块一年。

C 部分 · 前后端怎么聊天

9

HTTP / 请求 & 响应

前端给后端发一份「申请表」（请求 Request），后端处理完回一份「回执」（响应 Response）。这套收发规则叫 HTTP。

类比 · 你在柜台递一张表，工作人员处理后把结果递回来。

常见请求方法：

  • GET — 拿东西（看文章、刷列表）
  • POST — 提交东西（发帖、登录）
  • PUT / PATCH — 改东西
  • DELETE — 删东西
10

API

后端对外挂的一扇扇小窗口。每个窗口干一件事，前端（或别的程序）按约定的格式去敲窗口、拿结果。

类比 · 快递公司的取件窗口。你给单号，它给包裹；你给包裹，它给单号。

Vibecoding 里 · 用 OpenAI、Kimi、Anthropic 的能力，都是通过它们的 API 调用。

11

JSON

前后端之间最常用的「表格格式」。人看得懂，机器也好解析。

{
  "name": "小明",
  "age": 18,
  "skills": ["做饭", "写代码"]
}

关键字用双引号，对象用 { }，列表用 [ ]。

12

状态码 / Status Code

响应回执上印的三位数，一眼看出「成没成」。

  • 2xx · 成了（最常见 200 OK）
  • 3xx · 跳转到别的地址
  • 4xx · 你这边搞错了（401 没登录、404 找不到、429 太频繁）
  • 5xx · 后端自己爆了

D 部分 · 代码怎么管

13

Git / 仓库 / 提交

代码版本的「时光机」。每次改完来一发 提交 commit，相当于存档。可以随时回到任何一次存档。

  • 仓库 Repository / Repo · 装着整个项目 + 所有历史的文件夹
  • 分支 Branch · 平行宇宙，想试个新想法开一条不影响主线
  • 合并 Merge · 把分支上的改动并回主线

Vibecoding 里你可以让 Claude 帮你写 commit message、帮你合并分支。

14

GitHub

全世界最大的「代码网盘」，基于 Git。你的仓库推上去之后，别人能看、你换电脑能拉下来、Vercel 能自动从这里拿代码部署。

15

包 / 依赖 / npm

别人写好的代码包，你装上直接用，不用重复造轮子。

  • 包 Package · 一个可复用的小工具（比如「发送邮件」「画图表」）
  • 依赖 Dependency · 你的项目用到哪些包
  • npm · Node.js 的包管家，npm install xxx 就能装
  • package.json · 项目的清单，写着用了哪些包、什么版本
16

框架 / Framework

盖好了地基和水电的毛坯房。你只管装修，不用从夯土开始。

常见：Next.js / React（前端），Express / Hono（后端），Flutter（移动端）。

E 部分 · 和 AI 打交道

17

大模型 / LLM

Large Language Model，大语言模型。喂进去一堆字，吐出一堆字。GPT、Claude、Kimi、DeepSeek 都是。

关键认知 · 它不是「搜索引擎」，是「会续写的概率机器」。问法对了，它就续得对。

18

Prompt / 提示词

你丢给 AI 的那段话。Vibecoding 的一半功力在这里：说清楚你要什么、不要什么、给什么背景。

坏 Prompt · 「帮我写个网站」
好 Prompt · 「帮我写一个展示烘焙食谱的静态网站，首页列出所有食谱，点进去看详情，用 Next.js + Tailwind，深色主题」

19

上下文 / Context / Context Window

AI 一次对话能「记住」多少字。超了就开始忘前面。不同模型上下文大小不同，从几千到上百万 token 都有。

实战建议 · 一个对话干一件事。干完了 /clear 或者开新对话，不然它会被旧话题带偏、还更贵。

20

Token（两种意思，别搞混）

① 计费单位的 token · AI 把你的话切成一小段一小段，每段是一个 token。中文一个字大约 1.5–2 个 token，英文一个单词大约 1 个 token。模型按 token 计费：输入多少、输出多少。

② 密钥的 token（也叫 API Key） · 一串长长的字符，像 sk-xxxx…。用来向 API 证明「是我在调用，请扣我的钱」。

⚠️ API Key 等于钱 · 别截图发群、别提交到 GitHub、别放前端代码里。泄露后别人可以用你的额度，几小时能烧掉几千块。
21

模型 / Model

同一家公司通常有很多款模型，各有长处。

  • Claude Opus / Sonnet / Haiku · Opus 最聪明最贵，Haiku 最快最便宜
  • GPT-5 / GPT-4o · OpenAI 的系列
  • Kimi K2 · Moonshot 的代码模型，训练营用这个

简单任务用小模型，复杂任务用大模型，钱能省一大半。

22

环境变量 / Environment Variable

放 API Key、数据库密码这类「不能写进代码」的东西的地方。通常写在项目根目录的 .env 文件里，程序运行时自动读。

# .env 文件示例
OPENAI_API_KEY=sk-xxxxxxxx
DATABASE_URL=postgres://...

.env 一定要加进 .gitignore，不然会被提交到 GitHub。

F 部分 · 怎么让别人也能用

23

部署 / Deploy

把你电脑上跑得好好的代码，搬到一台 7×24 小时在线的服务器上，给全世界访问。

Vibecoding 推荐 · Next.js 项目丢 Vercel，连 GitHub，一键部署；静态页面丢 Cloudflare Pages。

24

数据库 / Database

专门存数据的仓库。用户、订单、文章……任何需要「下次打开还在」的东西都往里面塞。

  • SQL 数据库 · 像 Excel 表格（PostgreSQL / MySQL / SQLite）
  • NoSQL 数据库 · 像 JSON 文件（MongoDB / Firestore）

Vibecoding 里新手推荐 Supabase（基于 PostgreSQL，自带登录和 API）。

一张图速查

一次完整的 Vibecoding 请求长这样

    [你]
     │  ①在终端里对 Claude Code 说话
     ▼
 [Claude Code]  ──②带着 API Key 调用──▶  [Kimi / Claude API]
     │                                        │
     │  ④把代码改好写进文件                    ③返回代码片段（消耗 token）
     ▼
 [你的项目文件夹 = Git 仓库]
     │  ⑤ git push
     ▼
 [GitHub]  ──⑥触发自动部署──▶  [Vercel 服务器]
                                    │
                                    ▼
                             [用户通过域名访问]

概念过完啦 🎉

记不住不要紧。下一课开始动手写第一个小工具，这些词会一个一个活过来。