项目初始化与目录结构

一、clone 示例仓库

本教程配套的商城代码放在同一个 monorepo 仓库里，clone 下来即可：

git clone <你的仓库地址> full-stack
cd full-stack

如果你还没有这个仓库，也可以按下面的结构手动创建目录，边学边填代码。

二、为什么用 monorepo

monorepo（单仓多包）把所有相关代码放在一个仓库里：

full-stack/
├── docs/          # 教程文档（VitePress）
├── server/        # 后端（Spring Boot）
├── web-vue/       # Vue 前端
├── web-react/     # React 前端
├── package.json   # 根：npm workspaces 配置
└── README.md

好处：

• 文档和代码在一起，改代码 → 改文档 → 一起提交，不易脱节。
• 前后端一次 clone 全拿到，本地联调方便。
• npm workspaces 统一管理前端依赖：

{
  "workspaces": ["docs", "web-vue", "web-react"]
}

根目录执行 npm install 一次，三个前端包依赖全部装好。

三、运行文档站（现在就做）

# 在仓库根目录
npm install
npm run docs:dev

浏览器打开 http://localhost:5173，你应该能看到本教程首页。

npm run docs:build    # 生成静态站点到 docs/.vitepress/dist
npm run docs:preview  # 本地预览构建产物

你会看到一个 5173 端口

VitePress 基于 Vite，开发服务器默认跑在 5173 端口。后面 Vue/React 工程也默认这个端口，同时开多个项目时注意区分。

四、后三章会依次补齐的目录

目录	什么时候建立	章节
server/	第 6 部分	Spring Boot 工程
web-vue/	第 4 部分	Vue 3 工程
web-react/	第 5 部分	React 工程

五、提交第一个 commit

git add .
git commit -m "docs: 初始化全栈教程文档"
git push origin main

从这一刻起，你的全栈学习正式纳入版本管理。

环境检查清单

继续之前，确认：java -version ✓、node -v ✓、mysql --version ✓、文档站能打开 ✓。缺哪个回 开发工具安装 补。