16.9 安装所有工具

准备开餐厅

现在你理解了开Twitter餐厅需要的7样东西:

1. 房子框架(Next.js)
2. 菜单检查员(TypeScript)
3. 装修工具(Tailwind CSS)
4. 现成家具(shadcn/ui)
5. 食材仓库(PostgreSQL)
6. 仓库管理员(Prisma ORM)
7. 智能服务员(Vercel AI SDK)

该把这些工具装到电脑上了!

---

安装步骤

第1步:建房子(Next.js)

pnpm create next-app@latest my-twitter-restaurant

回答问题:

✔ Would you like to use TypeScript? › Yes
✔ Would you like to use Tailwind CSS? › Yes  
✔ Would you like to use App Router? › Yes

这一步装好了:

• ✅ 房子框架(Next.js)
• ✅ 菜单检查员(TypeScript)
• ✅ 装修工具(Tailwind CSS)

---

第2步:进入餐厅

cd my-twitter-restaurant

---

第3步:买家具(shadcn/ui)

npx shadcn@latest init

买一些常用家具:

npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add textarea
npx shadcn@latest add card

这一步装好了:

• ✅ 现成家具(shadcn/ui)

---

第4步:请仓库管理员(Prisma)

pnpm add prisma @prisma/client
pnpm prisma init

这一步装好了:

• ✅ 仓库管理员(Prisma ORM)

---

第5步:请智能服务员(AI SDK)

pnpm add ai @ai-sdk/openai

这一步装好了:

• ✅ 智能服务员(Vercel AI SDK)

---

第6步:开门营业

pnpm dev

打开浏览器:

http://localhost:3000

你应该看到Next.js的欢迎页面!

---

检查清单

餐厅需要	工具	状态
房子框架	Next.js	✅
菜单检查员	TypeScript	✅
装修工具	Tailwind CSS	✅
现成家具	shadcn/ui	✅
食材仓库	PostgreSQL	⏳ 需要单独创建
仓库管理员	Prisma ORM	✅
智能服务员	Vercel AI SDK	✅

---

总结

现在你的Twitter餐厅工具箱准备好了!

你已经:

• ✅ 理解了7个工具是什么(用餐厅比喻)
• ✅ 知道它们如何配合工作
• ✅ 安装好了所有工具

接下来,你可以开始用这些工具做项目了!

记住:

• Next.js = 房子框架
• TypeScript = 菜单检查员
• Tailwind CSS = 装修工具
• shadcn/ui = 现成家具
• PostgreSQL = 食材仓库
• Prisma ORM = 仓库管理员
• Vercel AI SDK = 智能服务员

你的Twitter餐厅可以开张了!