阶段 0：从零搭建项目骨架

📌 阅读时间约 15 分钟

读完你会知道：一个正式项目不是从写代码开始的，而是从目录结构、说明文档、版本管理开始。

TL;DR

• 你要做一个个人博客管理系统，前端 Vue 3，后端 Node.js，前后端分离
• 阶段 0 不写功能代码，只做一件事：把项目架子搭起来
• 你会得到：frontend/、backend/、docs/ 三个目录，一份 README.md，一份 .gitignore，和一个 Git 仓库
• 学完后你能回答：项目为什么要分目录？README 写给谁看？哪些文件绝不能提交？Git 到底有什么用？

课前准备

在开始之前，确认你电脑上有这些东西：

需要什么	怎么装
GitHub 账号 或 CNB 账号	去官网注册就行
VS Code	代码编辑器
Node.js	前端和后端都需要它
Git	版本管理工具
Trae	AI 编程助手，下载地址

Windows 装不上的话，试试这个"焚诀"

在终端里输入这三条命令，一键安装：

winget install vscode
winget install nodejs
winget install git.git

Trae 是我们的第一个 AI 编程工具。装好之后，推荐把模型切换为 DeepSeek-v4-pro。怎么切？把界面上的 Auto 关掉，就可以手动选择了。

你要做什么？

这个课程是一个个人博客管理系统项目。目标不是让你一次掌握 Vue、Node.js、MySQL 和部署——太贪心了。而是让你从头到尾走一遍真实项目的完整流程。

整个项目分成几个阶段，每个阶段只解决一个问题：

阶段	你要达成的目标	核心关键词
阶段 0（当前）	把项目骨架搭好，有目录、有说明、有版本管理	frontend、backend、docs、README、.gitignore、Git
阶段 1（下一站）	做出能访问的静态页面	Vue、Vue Router、静态数据、页面跳转

阶段 1 还没开始，别急

等你做完阶段 0 的全部验收，再看 阶段 1：做出你的第一个页面。

为什么项目要从"骨架"开始？

你可能习惯新建一个文件就开始写代码。但正式项目不是这样的——它需要让你自己、你的队友、甚至未来的你都能快速看懂：

• 这是什么项目？
• 怎么启动它？
• 哪些文件不应该提交？

阶段 0 就是解决这些问题。

让 AI 帮你搭出项目骨架

打开 Trae，把下面这段话发给 AI：

这是一个个人博客项目，前端采用 Vue，后端采用 Node.js。
请帮我初始化这个项目，完成 README 和 Git 忽略文件。
要求包含 frontend、backend、docs 三个目录，并分别说明它们的职责。

AI 执行完后，你的项目里会多出这些东西：

产出	它是干什么的
frontend/	Vue 前端项目——页面、路由、组件、样式都在这里
backend/	Node.js / Express 后端项目——API 接口和业务逻辑
docs/	项目文档——接口文档、部署说明、每阶段的复盘
README.md	项目说明书——写清楚结构、技术栈、怎么启动
.gitignore	告诉 Git 哪些文件不要提交
Git 仓库	记录每一次改动，出问题了可以回退

一步步跟着做

按下面 8 步走，每一步做完再进下一步：

1. 创建项目根目录
2. 在里面创建 frontend、backend、docs 三个子目录
3. 初始化前端 Vue 3 + Vite 项目
4. 初始化后端 Node.js + Express 项目
5. 编写根目录 README.md
6. 编写根目录 .gitignore
7. 初始化 Git，关联远程仓库
8. 提交第一个 commit

很多东西没讲细？

终端是什么？在哪里打开终端？怎么创建目录？这些基础操作建议你自己去问 AI。自己查出来的东西，印象更深，也更有成就感。当然，卡住了也别死磕，直接问我就行。

把代码推送到远程仓库

Git 的作用是记录每一次改动，并且能把代码同步到云端。云端仓库有两个好处：一是备份——电脑坏了代码还在；二是方便以后分享和部署。

考虑到国内网络环境，这里提供两个渠道——GitHub 和 CNB，你任选一个。

终端操作基础

不会用终端？先看这里

在 IDE 下方的终端窗口中，右键 → 粘贴、右键 → 复制是最常用的操作。快捷键（Ctrl+V / Cmd+V）有时候不管用，右键粘贴最稳妥。

你的目录还没初始化 Git

刚拿到 AI 生成的代码时，VS Code 会提示你这个目录还没有初始化 Git：

没关系，往下看，马上就会了。

选项一：GitHub

GitHub 的操作全在 IDE 里完成，不用打开浏览器：

1. 第一次使用会提示你登录 GitHub 账号
2. 输入仓库名称（比如 myblog）
3. 选择私有还是公开 —— 界面是英文的，Private 是私有，Public 是公开
4. 点击创建，仓库就好了

不需要终端操作，IDE 里点几下就完事。

选项二：CNB（国内同学推荐）

CNB 是国内代码托管平台，网络更稳定。分三步走。

第一步：创建仓库

进入"我的仓库"，点击"创建仓库"：

填写仓库名称（比如 myblog），推荐选择私有仓库，然后点击创建：

第二步：获取初始化命令

仓库创建好后，CNB 会给你一段"空仓初始化"的命令：

把这段命令复制下来，粘贴到终端里运行。

第三步：配置令牌（Token）

第一次往 CNB 推送代码时，终端会提示你输入密码。这里不是你的账号密码，而是一个叫"令牌"的东西。

先去 CNB 创建令牌：

令牌粘贴时不显示？别慌

在终端里粘贴令牌时，光标不会移动，屏幕上也不会出现任何字符。这不是没粘贴上，而是终端的安全机制——密码类内容不显示。 粘贴完后直接按回车就行。

仓库创建成功后，你会在 CNB 上看到它：

无论选哪个，最终都是这几条命令

git init .
git remote add origin <你的仓库地址>
git add .
git commit -m "init: 初始化项目和 Git"
git push -u origin main

注意分支名

有些平台默认分支叫 master 而不是 main。推送前先看一眼：

git branch       # 看当前分支叫什么
git remote -v    # 看远程仓库地址对不对
git status       # 看有没有漏掉的文件

Git 提交规范

虽然现在不严格要求，但了解一下没坏处。如果是大项目或者多人协作，规范不好会导致项目混乱，出 bug 了也不好回溯。

分支命名

不要直接在 main 分支上开发。 每个功能新建一个分支：

feature/xxx   # 新功能
fix/xxx       # 修 bug
docs/xxx      # 文档修改
style/xxx     # 样式调整
refactor/xxx  # 代码重构

比如阶段 1 做静态页面，就应该：

git checkout -b feature/static-pages

Commit 信息格式

每次提交，信息写成这个格式：

类型: 本次提交做了什么

常用类型：

类型	什么时候用
init	初始化项目
feat	新功能
fix	修 bug
docs	改文档
style	调样式，不动逻辑
refactor	重构代码
chore	配置、依赖等杂项

举几个后面会遇到的例子：

git commit -m "init: 初始化项目结构"
git commit -m "feat: 完成首页静态页面"
git commit -m "feat: 添加博客列表和详情页"
git commit -m "fix: 修复博客详情页刷新后数据丢失问题"
git commit -m "style: 优化博客卡片样式"
git commit -m "docs: 更新项目运行说明"

一次 commit 只做一件事

不要这样：

git commit -m "改了一堆东西"   ❌

也不要把登录功能、删文章、改 README、调样式塞进同一次提交。拆开：

git commit -m "feat: 添加管理员登录页面"
git commit -m "feat: 实现文章删除接口"
git commit -m "docs: 补充后台功能说明"
git commit -m "style: 调整后台表格样式"

提交前固定流程

每次提交前都走一遍这三步：

git status          # 看看哪些文件被改了
git diff            # 看看具体改了什么
git add .
git commit -m "feat: 完成某某功能"

这些文件绝对不能提交

node_modules/    # 依赖文件，太多太大，npm install 就能重新生成
dist/            # 构建产物
.env             # 环境配置，可能存了密钥密码
.DS_Store        # macOS 系统文件
*.log            # 日志文件

为什么 .env 不能提交？

.env 里可能存了数据库密码、API 密钥等敏感信息。私有仓库还好，公开仓库上传了这些就等于把密码公之于众，会有安全问题。.gitignore 就是帮你在提交时自动忽略这些文件。

学完检查：这些你都能做到吗？

做完上面所有步骤，来逐条自查：

• [ ] 能说清楚 frontend、backend、docs 分别放什么
• [ ] .gitignore 已经写了，node_modules 不会被提交
• [ ] README.md 写清楚了项目结构、技术栈
• [ ] git log 能看到你的第一个 commit
• [ ] 远程仓库里能看到你推送的代码

完成之后，把你的仓库链接私聊发给我。如果是私有仓库，记得把我拉进仓库。

几个重要提醒

• 不要急着写功能：阶段 0 的目标就是"能提交、能说清楚"。项目的启动和运行是后面阶段的事，这一步只关注目录结构、README、.gitignore 和 Git 配置。
• 不会的自己去问 AI：很多东西我没有讲得特别细，比如终端是什么、在哪里打开终端。自己去问 AI，这样学到的才是你自己的，而不是看我一步步教才能复刻。
• 卡住了该问就问：AI 解决不了的问题不要死磕，群里随时问。中间有遇到问题自己解决了也可以发到群里，给其他同学参考。
• AI 生成代码后，让它解释：每次 AI 给你代码，追问一句"这个文件是干什么的？"，重点弄懂 README.md、.gitignore、backend/src/index.js、frontend/package.json 这四个文件。

常见问题

为什么要分 frontend、backend、docs 三个目录？

前后端代码混在一起会很难维护。分开之后，前端改了只动 frontend，后端改了只动 backend，互不影响。docs 单独放文档，方便以后查阅。

README 到底写给谁看？

写给你自己、你的队友、任何接手这个项目的人。好的 README 回答三个问题：这是什么？怎么跑起来？目录里都是什么？

.gitignore 不加会怎样？

node_modules 可能有几万个文件，提交进去会让仓库变得巨大。.env 如果包含密钥被提交了，等于把密码公开到网上。

Git 到底有什么用？

Git 是一个版本管理工具。你的每一次提交都会有记录，改了哪些文件都很清晰。比如你不小心误删了某个文件，但之前已经在 Git 里提交过，就可以很方便地找回来。

为什么先不做功能，光搭架子？

就像盖房子要先打地基。架子搭好了，后面写功能就能直接往里填，不会写着写着发现结构不对再重来。

---

下一步

验收全部打勾了？去 阶段 1：做出你的第一个页面，开始写能看得到的页面。