做 Vibe Coding 到一定程度，你需要选一套"技术栈"——就是你开发一个项目要用哪些工具。这一篇带你过 VibeHub 技术栈 tab 的 9 个术语，让你知道自己"在用什么"、选什么最省事。
技术栈入门
技术栈（Tech Stack）
VibeHub 里的原话："技术栈是用于开发和运行一个软件应用（如网站、小程序或 App）而组合使用的一系列编程语言、框架、数据库和工具的集合。"
一个常见的技术栈名字叫"JAMStack"：JavaScript + API + Markup。或者 "MERN"：MongoDB + Express + React + Node.js。
你不需要记这些缩写，只需要知道：技术栈 = 你用了什么语言 + 什么框架 + 什么数据库 + 什么样式工具。
编程语言（会哪门就够了）
JavaScript
让网页可以"动"的语言。你点击按钮弹出提示、下拉刷新加载、表单提交前的校验——都是 JavaScript。
VibeHub 里的原话："JavaScript 是可在浏览器和 Node.js 等运行环境中执行、用于实现交互和程序逻辑的编程语言。让网页对操作作出反应的代码。"
为什么选它：前后端都能用（浏览器端 + Node.js 服务器端），AI 最熟悉的语言，Vibe Coding 首选。
TypeScript
就是在 JavaScript 上加了一层"类型检查"。写代码的时候编辑器会帮你检查是不是写错了类型。
VibeHub 里的原话："TypeScript 是在 JavaScript 基础上增加类型检查的编程语言。在运行前帮代码对名称和内容做检查。写名称→编辑器检查→标红提示→变成 JavaScript 运行。"
为什么选它：项目稍微大一点（3 个文件以上），TypeScript 能帮你避免很多低级错误。但学习曲线比 JS 高一丢丢。如果刚开始，先用 JavaScript 也行。
喂给 AI 的话："用 TypeScript 写这个项目。所有函数参数和返回值标注类型。接口定义用 interface。"
Python
另一种通用编程语言。Python 适合：数据脚本、自动化、AI/ML 后端、爬虫。Web 后端用 Python（Flask/FastAPI）也可以。
VibeHub 里的原话："Python 是常用于自动化、数据处理和服务器程序的通用编程语言。在电脑或服务器上批量处理文件的代码。"
什么时候选 Python：你做 AI 相关的项目（调用 LLM API、数据处理）、或者你的后端主要做数据和脚本。否则 Vibe Coding 选 JavaScript/TypeScript 更通用。
前端框架（选哪个省事）
React
把页面拆成"组件"来管理。每个按钮、卡片、弹窗都是一个独立的组件，组件之间有数据流动。
VibeHub 里的原话："React 是把页面拆成可复用组件、并随状态变化更新界面的 JavaScript 库。把会变化的页面拆成小块来更新。"
为什么最多人用：组件化、生态最大、AI 最熟悉。Vibe Coding 选 React 基本不会踩坑。
喂给 AI 的话："用 React + Vite 创建项目。组件按功能拆分到 components/ 目录。用 useState 管理表单状态。用 useEffect 调 API。"
Vue
另一种组件化框架。用"模板"的方式写组件，看起来更像 HTML。
VibeHub 里的原话："Vue 是使用模板和响应式数据构建交互界面的 JavaScript 框架。让模板里的文字跟随变化中的值。"
什么时候选 Vue：你之前用过 Vue、觉得 React 的 JSX 语法不习惯。否则优先选 React，AI 生态更成熟。
Next.js
基于 React 的全栈框架（前端 + 后端一起做）。你可以在 Next.js 里写前端页面，也写 API 接口（Serverless Functions）。
VibeHub 里的原话："Next.js 是基于 React、提供路由和服务端渲染等能力的 Web 应用框架。按网址找到页面，并可先在服务器准备内容。"
为什么不直接选 React 而选 Next.js：
- React 只管"页面展示"，Next.js 还管"页面路由"（不同网址显示不同东西）
适合谁：对新手最友好的全栈方案。一个项目搞定前端 + 后端 API。
喂给 AI 的话："用 Next.js 14 App Router 创建项目。pages 用 app/ 目录结构。API 接口写在 app/api/ 下。部署到 Vercel。"
样式与组件（不用自己写 CSS）
Tailwind CSS
你不用写 class="card" 然后在 CSS 文件里定义 .card {}，而是直接在 HTML 里写 class="bg-white rounded-lg shadow-md p-4"——类名就是样式。
VibeHub 里的原话："Tailwind CSS 是通过组合工具类名来编写网页样式的 CSS 框架。把类名换成卡片的具体外观。"
为什么适合 Vibe Coding：AI 非常擅长写 Tailwind——它不需要去查找 CSS 文件，直接在一行 class 里写完所有样式。
喂给 AI 的话："用 Tailwind CSS 写样式。按钮用 'bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition'。卡片用 'bg-white rounded-lg shadow-md p-6'。Flex 布局用 'flex items-center justify-between'。"
shadcn/ui
不只是一个组件库，它是"把组件代码复制到你项目里"的工具。不是 npm install，而是 npx shadcn add button——然后把 Button 的完整代码放到你的项目里，你想怎么改就怎么改。
VibeHub 里的原话："shadcn/ui 是把可编辑 React 组件代码添加到项目中的组件代码体系。添加命令 → button.tsx → 改组件 → 预览变化。"
为什么适合 Vibe Coding：结合 Tailwind 使用效果最好——AI 既认识 shadcn/ui 的组件名（Button、Dialog、Table 等），又可以直接改组件的 Tailwind 样式。
喂给 AI 的话："用 shadcn/ui 组件库。先 npx shadcn@latest init，然后 npx shadcn@latest add button card dialog。Button 用
新手推荐技术栈
最简单的方案（一个项目搞定所有）：
用 Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui。前端页面写在 app/ 目录下，API 接口写在 app/api/ 目录下。部署到 Vercel。
这是当前 Vibe Coding 性价比最高的方案——一个框架全搞定、AI 配合度最高、部署最简单。
AI 速览
