阶段 1：做出你的第一个页面

📌 阅读时间约 10 分钟

读完你会知道：先别碰后端和数据库，用纯前端静态数据就能做出一个能看、能跳转的博客网站。

TL;DR

• 阶段 1 不接后端、不连数据库，所有数据写在前端代码里
• 让 AI 帮你做出 4 个页面：首页、博客列表、博客详情、关于我
• 跑起来之后在浏览器里看看自己的网站长什么样——这比什么都重要
• 还可以根据自己的喜好调整风格，比如 iOS 玻璃拟态
• 验收标准：能跳转、能刷新、不报错，导航栏知道当前在哪

先做页面，后接数据

阶段 0 你把项目骨架搭好了。现在你一定手痒想写点"看得见"的东西。

这一阶段先不动后端，让 AI 帮你构建前端页面。为什么？

如果不理解"页面怎么切换"，就直接跳到"数据怎么从接口获取"，你会被两套概念同时轰炸。阶段 1 的策略是：先把页面和路由搞懂，数据假装写在前端，后面再换成真 API。

等到后面接上后端，你会发现只是换了一个数据来源而已，路由和组件逻辑完全不用改。

回顾阶段 0

还没搭好项目骨架？先回 阶段 0：从零搭建项目骨架 把基础打好。

让 AI 帮你生成页面

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

现在进入阶段 1：静态页面和路由。
请在 Vue 前端中完成首页、博客列表、博客详情和关于我页面。
先使用静态博客数据，不要连接后端和数据库。
要求有导航栏、基础样式、路由跳转，并能通过 npm run dev 预览。

AI 会帮你生成哪些页面？

路由（URL）	页面	你学到的是什么
/	首页	项目入口，导航栏 + 主视觉区
/posts	博客列表	用数组渲染卡片——这是 Vue 最核心的能力
/posts/:id	博客详情	动态路由：同一个组件，不同 id 显示不同文章
/about	关于我	纯静态页面，认识普通组件怎么写
兜底路由	404 页面	输错 URL 时给用户一个友好提示

当然，如果你有其他想做的页面，也可以趁现在让 AI 帮你一起写好。

跑起来之后，在浏览器里打开 localhost:5173，看看你自己的网站长什么样。

这些概念搞懂了吗？

组件是什么？

一个页面拆成多个独立模块，每个模块就叫一个"组件"。比如导航栏是一个组件，博客卡片是一个组件，页脚是一个组件。组件的好处是：一次写好，到处复用。

Vue Router 解决什么问题？

你在浏览器里输入 /posts，页面就显示博客列表；输入 /about，就显示关于我。这个"URL 到页面"的映射关系，就是 Router 干的活。

列表渲染怎么玩？

博客列表不是一篇一篇文章手写 HTML，而是把文章数据放在一个数组里，用 Vue 的 v-for 指令自动生成。你只需要改数组，页面自动更新。

动态路由是怎么回事？

/posts/1 和 /posts/2 用的是同一个组件。Router 把 URL 里的 1 或 2 作为参数传给组件，组件根据这个参数去数据里找对应的文章内容。

为什么可以先写静态数据？

把数据暂时写在 .vue 文件或一个 .js 文件里。后面接后端 API 时，你只需要把数据来源从本地变量换成 fetch('/api/posts')，页面代码基本不动。这叫"先跑通流程，再替换数据源"。

按你的喜好调整风格

页面跑通之后，你可以让 AI 帮你换一套视觉风格。每个人的审美不一样，做出来的博客也应该是你自己的风格。

比如我个人喜欢苹果的玻璃拟态风格，就找了一个写前端比较强的 AI，让它帮我改：

帮我用 iOS 的玻璃风格来重写前端页面。
页面用多个卡片组件堆叠的方式呈现。
最后面的背景采用 image.png。

你也可以试试其他风格：极简风、像素风、暗黑风……随便你。这是你的博客，你说了算。

重要

视觉改版是加分项，不是必须项。验收的第一优先级永远是：路由能不能跳？页面能不能刷新？如果改完视觉发现路由坏了，先修路由，再看样式。

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

• [ ] npm run dev 能打开前端页面
• [ ] 首页、博客列表、博客详情、关于我之间能互相跳转
• [ ] 博客列表由静态数组渲染（改一下数组，页面跟着变）
• [ ] 点不同文章，详情页显示不同内容（动态路由生效）
• [ ] 刷新页面不会白屏或报错
• [ ] 导航栏能看出当前在哪个页面（高亮）
• [ ] 样式能让人一眼看出页面结构，不是全部文字堆在一起
• [ ] 如果做了视觉改版，改完后路由跳转依然正常

代码提交

做完验收，按照阶段 0 学的规范提交：

git checkout -b feature/static-pages
git status
git add .
git commit -m "feat: 完成静态页面和路由"

如果后面又折腾了视觉改版，单独再交一次：

git add .
git commit -m "style: 优化首页视觉风格"

两次分开提交的好处是：如果视觉改版出了问题，可以单独回退那一次提交，不会影响已经调好的路由。

几个重要提醒

• 别碰后端和数据库：这个阶段就是让你专注理解"页面怎么跳转"
• 先理解路由，再理解数据：顺序不能反。路由是骨架，数据是血肉
• AI 改代码时，要求它说明改了哪些文件：不要盲目接受大批改动，每改一次你都要知道动了哪里
• 跑起来看看：在浏览器里看到自己的网站，是建立信心最快的方式。跑起来之后截图发到群里，让大家也看看
• 视觉改版可以玩，但验收标准不变：漂亮是加分，路由和跳转是底线

下一步是什么？

阶段 2 会把这些页面拆成更细的组件——Header、Footer、BlogCard、Layout——让你的代码更清晰、更可复用。

进入阶段 2 之前，花 5 分钟做一份小复盘：

这一阶段我做了什么？
我新增或修改了哪些文件？
我运行了哪些命令？
我遇到了什么问题？
我是怎么验证页面能正常工作的？

写下来就行，不用给别人看。这个过程帮你把"做过了"变成"学会了"。

常见问题

为什么要用静态数据，不直接连 API？

分开学，减少认知负担。路由和页面切换已经够你消化了，加上后端和数据库会让问题混在一起。先跑通纯前端流程，后面接 API 只是一行 fetch 的事。

刷新页面白屏怎么办？

首先看浏览器控制台有没有报错。最常见的原因是路由没配好——确保每个你访问的 URL 都在 Router 里有对应配置。另外检查一下有没有一个兜底的 404 路由。

导航栏怎么知道当前在哪个页面？

Vue Router 提供了 router-link-active 这个 CSS class。你只需要给当前页对应的链接加个高亮样式就行，不用手动判断。

视觉改版后路由跳不动了？

检查 AI 改代码时有没有动到 router/index.js 或者 App.vue 里的 <router-view />。这两个是路由的核心，只要它们还在，跳转就不会丢。

为什么提交要分两次？

git commit 不是"保存按钮"。好的提交像是一个故事：每次提交只做一件事。路由调通了交一次，视觉改完交一次。将来回看或回退时，你才知道每个改动是干什么的。

---

往前翻

阶段 0：从零搭建项目骨架 ← 还没做完的话先回去补基础。

下一步

验收全部打勾了？去 阶段 2：组件化和基础样式，把代码拆成可复用的组件，加上响应式布局。