核心概念

项目架构与代码组织

了解这套模板的文件结构,知道你的代码应该放在哪里

顶层目录是干什么的

这套模板是一个 monorepo(单一代码仓库,一个 git 仓库里放了多个项目)。打开项目根目录,你会看到:

01mvp/
├── apps/              # 你最终上线的网站
│   └── 01mvp-web/     #   主站(Next.js 应用)
├── packages/          # 多个网站共用的"工具箱"
│   ├── ui/            #   预制 UI 组件(按钮、输入框等)
│   ├── ui-shared/     #   跨项目共用的业务组件
│   ├── auth/          #   登录认证
│   ├── i18n/          #   多语言翻译
│   ├── payment/       #   支付(Stripe + 微信支付)
│   └── ...            #   还有 20+ 个其他工具包
├── tools/             # 开发工具和脚本
├── openspec/          # OpenSpec 设计文档

简单理解apps/ = 你要卖的产品,packages/ = 造产品用的通用零件,tools/ = 车间里的辅助工具。

我的代码应该放在哪?

你的情况放这里
这个组件/功能只在一个网站用到apps/01mvp-web/src/components/
逻辑比较复杂,但只在一个网站用到apps/01mvp-web/src/lib/
这个功能多个网站都要用packages/ 下对应的包里
shadcn/ui 组件(按钮、弹窗等)用命令加到 packages/ui/不要手改
共用业务组件(如用户头像)packages/ui-shared/

shadcn/ui 是什么? 一个预制 UI 组件库,提供了按钮、输入框、对话框等 80+ 种零件。通过命令 pnpm dlx shadcn@latest add <组件名> 来添加。

包(Package)是怎么工作的

每个 packages/ 下的文件夹是一个独立的包(package)。关键规则:

  1. 每个包有自己的 package.json
  2. workspace:* 引用内部包 — 意思是"就用本仓库的版本,别去网上下载"
  3. 入口文件是 src/index.ts — 包对外提供的功能从这里导出
  4. 包之间可以互相引用 — 比如 ui-shared 可以引用 ui 里的组件

UI 组件三层结构

packages/ui/         ← 第一层:shadcn 原装组件
    ↓                   只通过命令添加,不要手动改
packages/ui-shared/  ← 第二层:共用业务组件
    ↓                   多个网站都用得到的,比如用户头像
apps/01mvp-web/src/components/  ← 第三层:应用专属

一句话:改样式在第三层改,做共用零件在第二层,第一层别碰。

关键规则速查

记住这几条,能避免大部分结构性错误。

  • ✅ 改网站功能 → 去 apps/01mvp-web/src/
  • ✅ 改共用逻辑 → 去 packages/
  • ✅ 改数据库结构 → 改 prisma/schema.prisma,跑 pnpm db:migrate
  • ✅ 加环境变量 → 加在 .env.local
  • ❌ 不要手动改 packages/ui/ 里的组件
  • ❌ 不要把单网站代码放到 packages/
  • ❌ 不要把密钥密码写到 packages/

下一步