技术栈详解
16.1 认识我们的超级工具箱
想象你要开一家Twitter餐厅
假设你要开一家特殊的餐厅,叫"Twitter餐厅"。
这不是普通的餐厅,而是一个让客人分享想法的地方:
- 客人可以写小纸条(发推文)
- 可以看别人的纸条(看推文)
- 可以给纸条点赞
- 可以评论别人的纸条
开这样一家餐厅,你需要什么?
开餐厅需要的7样东西
| 序号 | 餐厅需要 | 对应的工具 | 作用 |
|---|---|---|---|
| 1 | 房子框架 | Next.js | 整个餐厅的结构 |
| 2 | 菜单检查员 | TypeScript | 检查菜单有没有写错 |
| 3 | 装修工具 | Tailwind CSS | 快速装修餐厅 |
| 4 | 现成家具 | shadcn/ui | 桌椅、柜子等家具 |
| 5 | 食材仓库 | PostgreSQL | 存放所有食材 |
| 6 | 仓库管理员 | Prisma ORM | 管理仓库里的东西 |
| 7 | 智能服务员 | Vercel AI SDK | AI助手帮忙服务 |
这7样东西如何配合?
想象一个客人来你的Twitter餐厅发推文:
- 房子框架(Next.js) - 提供餐厅的整体结构
- 菜单检查员(TypeScript) - 检查客人写的内容有没有错
- 装修工具(Tailwind CSS) - 让餐厅看起来漂亮
- 现成家具(shadcn/ui) - 提供桌椅让客人坐
- 仓库管理员(Prisma ORM) - 把客人的纸条存到仓库
- 食材仓库(PostgreSQL) - 真正存放纸条的地方
- 智能服务员(AI SDK) - AI帮客人写推文
看到了吗?开一家餐厅,需要这7样东西配合!
什么是技术栈?
技术栈就是这套配合使用的工具。
就像开餐厅:
- 你不能只有房子,还需要家具
- 你不能只有家具,还需要仓库
- 这些东西要配合使用
写代码也一样:
- 你需要一个框架
- 你需要检查错误的工具
- 你需要美化界面的工具
- 这些工具要配合使用
为什么用Twitter举例?
Twitter的功能很典型,包含了大部分应用都需要的东西:
- 界面(推文列表、按钮)
- 数据(用户信息、推文内容)
- 交互(点赞、评论)
- 实时更新(新推文自动显示)
所以我们会用Twitter餐厅的例子,帮你理解每个工具的作用。
记住:Twitter只是用来举例的,这些工具可以做任何应用!
接下来你会学到什么?
接下来的8节,我们会一个一个认识这些工具:
- 16.2 - Next.js(餐厅的房子框架)
- 16.3 - TypeScript(菜单检查员)
- 16.4 - Tailwind CSS(装修工具)
- 16.5 - shadcn/ui(现成家具)
- 16.6 - PostgreSQL(食材仓库)
- 16.7 - Prisma ORM(仓库管理员)
- 16.8 - Vercel AI SDK(智能服务员)
- 16.9 - 安装所有工具
每一节都会:
- 用餐厅比喻解释
- 讲技术概念
- 用Twitter举例
- 说明为什么选它
下一步
准备好了吗?
翻到16.2节,我们来认识第一个工具:Next.js - 餐厅的房子框架!