欢迎来到 The Incubator！🎉
这是一个零基础友好的练习项目，专为刚接触 Web 开发的团队成员准备。不用担心不会，跟着下面的步骤一步步来，你也能成为开发者！
简单来说，这是一个"练习场"：
- 每个人都可以在这里创建自己的小页面
- 学习如何使用现代化的开发工具
- 练习团队协作，体验真实的工作流程
- 不用害怕弄坏项目，这就是用来练手的！
Node.js 是运行这个项目的基础环境。
下载地址: https://nodejs.org/zh-cn/
- 下载 LTS 版本（长期支持版，更稳定）
- 双击安装包，一路点"下一步"即可
- 安装完成后，打开 PowerShell（或命令提示符），输入以下命令验证：
如果显示版本号（如
node -v
v20.x.x），说明安装成功！
pnpm 是一个快速、节省磁盘空间的包管理工具。
打开 PowerShell，输入以下命令：
npm install -g pnpm安装完成后验证：
pnpm -v看到版本号就说明成功了！
Git 是用来管理代码版本的工具，团队协作必备。
下载地址: https://git-scm.com/downloads
- 下载并安装
- 安装时保持默认选项即可
- 验证安装：
git --version
推荐使用 VS Code（Visual Studio Code）
下载地址: https://code.visualstudio.com/
- 免费、强大、新手友好
- 安装后推荐安装这些插件（在 VS Code 左侧扩展商店搜索）：
Chinese (Simplified)- 中文界面ES7+ React/Redux/React-Native snippets- React 代码片段Tailwind CSS IntelliSense- CSS 自动提示Prettier- 代码格式化
打开 PowerShell（或 VS Code 的终端），输入：
# 1. 克隆项目到你的电脑
git clone https://gitee.com/HuangGuaDaGuiNan/the-incubator.git
# 2. 进入项目文件夹
cd TheIncubator
# 3. 安装项目依赖（会下载很多必要的文件，需要等一会儿）
pnpm install在项目文件夹里输入：
pnpm dev看到类似这样的提示就说明成功了：
▲ Next.js 16.1.1
- Local: http://localhost:3000
打开浏览器，访问 http://localhost:3000，你应该能看到项目首页了！
🎉 恭喜！环境准备完成，你已经成功运行了第一个项目！
在这个项目中，每个人都在自己的分支上独立工作。你的分支就是你的专属空间，可以自由创建任何页面，不用担心影响别人。
# 创建并切换到你的分支（把 zhangsan 换成你的名字）
git checkout -b zhangsan-
在
app文件夹里创建页面比如创建一个
app/hello/page.tsx，这就是你的第一个页面！ -
写一些简单的代码
可以复制下面的模板开始：
export default function HelloPage() { return ( <div className="p-8"> <h1 className="text-3xl font-bold">你好，世界！</h1> <p className="mt-4">这是我的第一个 React 页面！</p> </div> ) }
-
在浏览器查看效果
访问
http://localhost:3000/hello
TheIncubator/
├── app/ ← 这里放你的页面
│ ├── page.tsx ← 网站首页
│ ├── hello/ ← 示例：hello 页面
│ │ └── page.tsx
│ └── about/ ← 示例：about 页面
│ └── page.tsx
├── components/ ← 共用的组件（可复用的代码块）
│ └── ui/ ← UI 组件库
├── public/ ← 放图片等静态文件
└── package.json ← 项目配置文件（不用管）
记住：你在自己的分支上工作，可以自由地在 app 文件夹下创建任何页面！
Git 就像是代码的"云盘"，可以保存你的代码，也能和队友共享。
- master 分支：由管理员维护，包含项目基础代码
- 个人分支：你的专属空间，用你的名字命名（如
zhangsan、lisi） - 你可以和其他队友的分支互相合并，学习借鉴彼此的代码
1. 写代码、保存、测试
正常写代码，保存文件，在浏览器里看效果。
2. 提交你的修改
# 查看你修改了哪些文件
git status
# 把所有修改加入暂存区
git add .
# 提交修改，写上说明
git commit -m "添加了张三的个人介绍页面"3. 推送到远程仓库
# 第一次推送需要用这个命令
git push -u origin zhangsan
# 之后再推送只需要
git push4. 想借鉴队友的代码？
# 切换到你的分支
git checkout zhangsan
# 合并队友的分支到你的分支
git merge lisi# 查看当前状态
git status
# 查看所有分支
git branch
# 切换到主分支
git checkout master
# 拉取最新代码
git pull
# 查看提交历史
git log --oneline问题 1：提示 "command not found" 或 "不是内部或外部命令"
- 原因：没安装对应的软件，或者没配置环境变量
- 解决：重新安装 Node.js / pnpm / Git，安装时注意勾选"添加到 PATH"
问题 2：pnpm install 很慢或失败
- 原因：网络问题，国外服务器连接慢
- 解决：使用国内镜像源
pnpm config set registry https://registry.npmmirror.com
问题 3：端口被占用（Port 3000 is already in use）
- 原因：3000 端口被其他程序使用了
- 解决：
- 方法 1：关闭占用端口的程序
- 方法 2：使用其他端口：
pnpm dev -p 3001
问题 1：提示需要配置用户信息
# 设置你的名字和邮箱
git config --global user.name "你的名字"
git config --global user.email "your.email@example.com"问题 2：不小心改错了，想撤销
# 撤销所有未提交的修改（谨慎使用！）
git checkout .
# 撤销某个文件的修改
git checkout -- 文件名问题 3：合并冲突（Merge Conflict）
- 原因：你和队友改了同一个文件的同一个地方
- 解决：
- 打开冲突文件，会看到
<<<<<<,======,>>>>>>这些标记 - 手动编辑，保留需要的内容，删除标记
- 保存后重新提交
- 打开冲突文件，会看到
问题 1：改了代码但浏览器没反应
- 试试刷新浏览器（Ctrl + F5 强制刷新）
- 检查终端有没有报错
- 重启开发服务器（Ctrl + C 停止，然后
pnpm dev重启）
问题 2：不知道怎么写代码
- 先看看别人写的代码，模仿着来
- 查看本文末尾的学习资源
- 问队友或项目负责人
问题 3：代码报错看不懂
- 复制错误信息，去百度/Google 搜索
- 查看终端和浏览器控制台的错误提示
- 检查是否有拼写错误或语法问题
- ✅ 创建个人介绍页面，包含姓名、照片、自我介绍
- ✅ 做一个简单的计数器（点击按钮数字加 1）
- ✅ 制作一个个人名片，包含联系方式
- 📝 做一个待办事项列表（可以添加、删除、标记完成）
- 🎨 实现亮色/暗色主题切换
- 📋 创建一个简单的表单（带验证功能）
- 🌐 调用天气 API 显示实时天气
- 📊 制作数据可视化图表
- 🔐 实现简单的登录功能
- B站搜索：Next.js 入门、React 基础教程
- YouTube（需要梯子）：Traversy Media、Net Ninja
- 先看错误提示，尝试理解
- 复制错误信息，去百度/Google 搜索
- 在团队群里问问队友
- 查看项目的 Issues 区，看看别人有没有遇到类似问题
pnpm dev # 启动开发服务器
pnpm build # 构建生产版本
pnpm start # 启动生产服务器
pnpm lint # 检查代码规范git status # 查看状态
git add . # 添加所有修改
git commit -m "说明" # 提交修改
git push # 推送到远程
git pull # 拉取最新代码
git checkout -b 分支名 # 创建并切换分支
git branch # 查看所有分支如有任何问题，请联系项目负责人或在 Gitee Issues 中提问。
本项目仅供学习使用。
开始你的编程之旅吧！加油！💪
记住：
- 不懂就问，没有愚蠢的问题
- 多动手，多实践，多犯错（这里就是练习的地方）
- 和队友互相帮助，共同进步