01
网页基础前端Frontend
网页上用户能看到和操作的部分
NIMBUS产品 定价 登录
用户在这里看见和操作把想法变成网站输入一句描述，生成你的第一个页面。免费开始
HTML 内容结构CSS 视觉样式JS 交互逻辑
产品官网与落地页 · 登录、注册和资料表单
Vibe Coding 新手路线 · 4 个阶段
快速掌握 Vibe Coding 常用术语
已浏览 0 / 44
01
第一阶段
先看懂网站的前端与后端
02
后端入门后端Backend
在页面背后处理规则、数据和秘密信息
浏览器POST
/api/signup请求 →1路由接收找到处理代码→2检查与处理校验业务规则→3读写数据连接数据库
← 响应201 Created
{ "userId": 2048 }提交表单后保存到数据库 · 登录后读取个人资料
03
页面布局单页滚动布局Single Page
在同一长页面中讲完一段完整内容
vibeflow.app
描述你的想法,AI 帮你设计、构建并上线。
✦一句话生成从想法直接开始
⌘边聊边修改像搭档一样协作
↗一键发布获得公开网址
准备好做出第一个产品了吗?免费开始,无需信用卡
产品落地页 · 活动页
04
官网模块设计顶部导航栏Navbar
在页面顶部提供品牌和主要入口
官网顶部导航 · 文档站吸顶栏
05
官网模块设计首屏Hero
用页面第一屏说明产品和下一步
新 · AI 建站助手
把想法变成网页，只需一句话
不用写代码，描述你想要的页面，AI 帮你生成、修改、上线。
免费开始观看演示 →
SaaS 产品官网首屏 · 个人作品集开场
06
官网模块设计社会证明SocialProof
用可核实的信息降低用户的不确定感
TRUSTED BY PRODUCT TEAMS
NorthstarLumaArcusOrbital
★★★★★4.9 / 5来自 2,300+ 条真实评价
首屏下方的 logo 墙 · 注册页的数据背书
07
官网模块设计行动号召CTA
引导用户完成当前最重要的下一步
准备好开始了吗？
免费试用 14 天 · 无需信用卡 · 随时取消
立即免费试用先看看定价 →
首屏主按钮 · 长页结尾的再次召唤
08
官网模块设计页脚Footer
在页面底部集中放置补充信息
官网多列页脚 · 博客极简版权行
02
第二阶段
让页面真的可以操作
01
通用组件按钮Button
点击后执行保存、提交或删除等操作
登录表单提交 · 删除确认弹窗
02
输入组件输入框Input
让用户输入一行文字
登录注册表单 · 顶部搜索框
03
输入组件表单Form
把一组输入整理成一次完整提交
登录注册 · 个人资料设置
04
反馈组件弹窗Modal
在当前页面上方集中处理一项任务
确认删除这个项目？
取消确认删除
删除确认 · 重命名弹窗
05
反馈组件轻提示Toast
短暂反馈刚刚完成的轻量操作
保存成功
保存
保存成功反馈 · 复制链接确认
06
反馈组件警告提示Alert
在页面中持续显示提示或风险
体验环境 · 数据每日 0 点重置×
提交失败 · 2 处填写有误，请检查后重试×
表单错误汇总 · 系统维护公告
03
第三阶段
让页面接入真实数据
01
网络基础网址URL
准确指出网上某个资源的完整地址
协议域名路径参数锚点
地址栏里的完整网址 · 搜索结果页的参数
02
网络基础HTTP 请求HTTP
浏览器与服务器交换信息的基本方式
GET —— 拿数据
GET /api/components HTTP/1.1
Host: api.vibeui.dev
GET /api/components HTTP/1.1
Host: api.vibeui.dev
POST —— 交数据
POST /api/login HTTP/1.1
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }
POST /api/login HTTP/1.1
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }
地址栏回车发 GET · 登录表单发 POST
03
网络基础API 接口API
让两个程序按约定交换数据
请求 REQUEST
GET https://api.vibeui.dev/weather?city=shenzhen
Authorization: Bearer sk-••••3f2k
GET https://api.vibeui.dev/weather?city=shenzhen
Authorization: Bearer sk-••••3f2k
↓
响应 RESPONSE
200 OK
{ "city": "深圳", "temp": 31, "text": "多云" }
200 OK
{ "city": "深圳", "temp": 31, "text": "多云" }
API 文档页 · 终端 curl 调接口
04
网络基础JSON 数据JSON
用文本表示对象、数组和简单数据
{
"name": "按钮 Button",
"price": 0,
"free": true,
"tags": ["通用", "表单"]
}Network 面板看返回 · 编辑器里的 data.json
05
后端入门后端语言地图Backend Languages
选择一种语言编写后端程序
JS / TS Python Go Java PHP
先选一门做完整项目，再横向比较Node.js 做全栈网站 · Python 做 AI 接口
06
后端入门后端框架Backend Framework
用现成结构组织路由、数据和错误处理
语言TypeScript
框架Next.js / Express
提供路由 · 中间件 · 响应
Next.js Route Handler · Express 小型 API
07
后端入门路由与端点Route & Endpoint
把一种请求交给对应的处理代码
GET/api/posts
POST/api/posts
GET/api/posts/:id
GET /api/posts 取列表 · POST /api/login 提交登录
08
数据与账号数据库Database
让应用长期保存、查找和修改数据
users · 表
id名字城市
1小狸深圳
2阿机杭州
增查改删
Supabase 表格编辑器 · 页面从库里读数据
09
数据与账号SQL 查询SQL
用结构化语句查询和修改关系型数据
SELECT name, city
FROM users
WHERE city = '深圳';查询用户列表 · 新增一条任务
10
数据与账号数据校验Validation
使用输入前先检查格式和范围
email✓ oil@example.com
age✕ 必须是 1–120
role✓ user
注册邮箱和密码 · 创建商品价格
11
数据与账号登录鉴权Authentication
确认用户是谁，并维持登录状态
账号证明 → 验证身份 → 登录态
你是谁？Authentication邮箱密码登录 · 短信或邮箱验证码
12
数据与账号权限控制Authorization
判断当前用户可以查看或修改什么
访客只读
成员查看 + 编辑
管理员管理全部
只能编辑自己的资料 · 项目成员可查看
13
反馈组件骨架屏Skeleton
内容加载前先保留大致位置
首页首屏加载 · 列表加载占位
14
展示组件空状态Empty
在没有数据时说明原因和下一步
还没有任何项目创建第一个项目，开始协作吧
空列表 / 空表格 · 搜索无结果
15
反馈组件结果页Result
在完整流程结束后说明结果和下一步
提交成功
审核结果将在 1-3 个工作日内通知你
提交成功页 · 支付结果页
04
第四阶段
保存改动,然后真正上线
01
后端入门终端命令行Terminal
用文字命令让电脑执行具体操作
$ npm run dev
> my-first-page@0.1.0 dev
✓ Ready in 1.2s
→ Local: http://localhost:3000
浏览器打开这个地址，就能看见你的页面
npm run dev 启动项目 · 报错红字别慌，往上翻
02
后端入门包管理npm
安装并运行 JavaScript 项目的依赖
package.json · 清单
"react": "^19.0.0"
"vite": "^6.0.0"
"scripts": dev / build
npminstall
→
node_modules · 仓库
📦 react
📦 vite
📦 …共 42 个包
package.json 清单长这样 · npm install 搬依赖
03
Git 专区Git 版本控制Git
在本地记录代码改动和版本历史
💻工作区正在改的文件
→git add
📦暂存区这次要记的改动
→git commit
🗂本地仓库
→git push
☁️远程仓库GitHub
$ git add . && git commit -m "首页能跑了" && git push
一张图看懂 Git：代码沿四段流水线走，commit 只在本地存档（● +1），push 才上传云端；想把队友的更新拿回来，就走反方向的 git pull
GitHub 提交记录页 · 终端里 git log 翻历史
04
Git 专区忽略文件.gitignore
告诉 Git 哪些新文件不要记录
💻工作区📄 index.html
📄 style.css
📄 .env 🔑 →git add 🛡.gitignore🚫 .env 被拦下 → 📦暂存区✓ index.html
✓ style.css
📄 style.css
📄 .env 🔑 →git add 🛡.gitignore🚫 .env 被拦下 → 📦暂存区✓ index.html
✓ style.css
$ echo ".env" >> .gitignore && git status
被规则点名的文件永远进不了暂存区：.env 密钥被 🚫 挡在门外，其他文件正常通过；status 里看不到它才算生效
新建 .gitignore 文件 · git status 前后对比
05
Git 专区差异对比Diff
逐行查看两个代码状态之间的变化
🕐 旧版本（上个存档）- <button>点我</button> </section>
✨ 新版本（现在）+ <button class="btn">立即开始</button> </section>
$ git diff
左旧右新逐行对账：红色 - 是删掉的，绿色 + 是新增的；AI 大改之后先 diff 看懂了，再 commit 存档
终端 git diff · 比较最近两个提交
06
Git 专区提交Commit
给当前改动保存一个有说明的版本
💻工作区改好的 index.html
→git add
📦暂存区改动打包上车
→git commit
🗂本地仓库
→git push
☁️远程仓库还没上云
$ git add index.html && git commit -m "完成首页导航栏"
改动打包上车 → 发车存档：本地仓库多 1 个存档点 a3f9c21，说明写「做了什么」；commit 只存本地，上云要靠 push
终端里 add + commit · VS Code 源代码管理面板
07
Git 专区分支Branch
为一项工作单独推进一条版本线
main 主线
feature/new-nav
⑂ 从 main 的第 2 个存档点叉出一条平行线：两条线各存各的 ●，分支上折腾坏了，主线毫发无损
$ git switch -c feature/new-nav
不是复制文件夹，而是同一个仓库里的平行世界线：新功能在分支上做，验证 OK 再 merge 合回 main
终端开新分支 · GitHub 分支下拉切换
08
Git 专区推送Push
把本地提交发送到远程仓库
💻工作区不涉及
→
📦暂存区不涉及
→
🗂本地仓库
→git push
☁️远程仓库
$ git push
把本地 2 个新存档复制到云端：commit 只存本地，push 才算上云，电脑坏了也丢不了
终端 git push 上云 · push 被拒的现场
09
上线与排错环境变量Env Var
让不同环境使用不同配置而不改源码
.env · 本地开发配置
OPENAI_API_KEY=sk-proj-••••••
DATABASE_URL=postgres://••••
process.env.OPENAI_API_KEY
🛡 .gitignore 规则已匹配；提交前再看 git status
.env 文件长这样 · 代码里只写变量名
10
上线与排错Serverless 函数Serverless
按请求运行后端代码，运维交给云平台
请求 → 唤醒函数 → 响应
空闲时不用一直养着一台机器Next.js API Route · 联系表单发送邮件
11
上线与排错部署上线Deployment
把本地项目发布成别人能访问的网站
💻本地文件
→
📦build 打包
→
☁️托管平台
→
🌐my-app.vercel.app
Vercel 部署成功页 · 终端 npm run build
12
上线与排错服务端日志Server Logs
查看后端收到请求后发生了什么
12:08:31 POST /api/orders req_8fa2INFO order created · 201 · 184msuser=u_23 · order=o_91
Vercel Function Logs · 按 request id 追踪请求
13
网络基础域名Domain
用一个好记的名字访问网站
🔍 vibeui搜索
vibeui.dev✓ 可注册¥68/年加入清单
vibeui.com已被注册——
注册商搜索下单 · 域名管理与续费
14
网络基础DNS 解析DNS
把域名指向网站实际所在的服务
🌐浏览器vibeui.dev
是哪家？
→
是哪家？
📒DNS 电话簿查到记录
76.223.54.1
→
76.223.54.1
🖥️服务器按 IP 上门
拿回网页
拿回网页
DNS 控制台加记录 · 终端 dig 查解析
15
网络基础安全连接HTTPS
加密浏览器与当前网站之间的连接
现在没有小锁，浏览器会直接劝退用户
地址栏小锁与证书 · 托管平台自动开 HTTPS