大家好，我是程序员东哥。
前两篇文章发出去之后，后台最多的一类留言是什么你们知道吗——
"环境都配好了，然后呢？"
"东哥能不能出一个实际项目的教程？"
"工具装好了但不知道从哪开始写……"
今天，我们就来填这个坑。
这一期，我会在 VS Code 里用 Claude Code + DeepSeek V4，从零搭建一个完整的个人博客前端。有首页、有文章分类、有文章详情、有关于我、还能在浏览器里直接写文章发布——一个正经博客该有的前端功能，全都有。
注意：本期聚焦前端页面 + 数据录入。 后端服务、数据库、部署上线内容量不小，我们放下期单独讲，确保大家每一步都能消化。
全程我不手写一行代码，所有代码 Claude Code 来写。你只需要告诉它你想要什么。
为什么选个人博客作为实战项目？
可能会有同学问：东哥，为什么是博客？不能做个别的吗？
三个原因：
第一，博客够经典。 首页、列表、详情、分类、关于、表单录入——这些页面涵盖了前端开发 80% 的常见模式。把这个项目吃透，你再去做企业官网、商城、后台管理系统，底层逻辑是一样的。
第二，博客能复用。 今天跟着做完，改个名字、换个头像、写几篇文章，这就是你自己的博客。不是 demo，是能真正用起来的东西。
第三，博客最能体现 AI 编程的价值。 传统方式搭一个博客，你要写 Vue 组件、CSS 样式、路由配置、表单处理、本地存储逻辑，没几个小时下不来。用 Claude Code，说清楚需求，它全给你写完。传统开发 4-6 小时 → AI 辅助 20-30 分钟。
好，废话不多说，先看我们要做什么。
项目需求梳理
今天的博客前端，包含五个核心页面 + 一个数据录入功能：
- ① 首页 —— 顶部导航栏 + 个人简介区（头像、昵称、一句话介绍）+ 最新文章列表（标题、摘要、日期、分类标签）+ 底部 footer
- ② 文章分类页 —— 按技术 / 生活 / 工具等分类展示，每个分类显示文章数量，点击展开该分类下的文章列表
- ③ 文章详情页 —— 文章标题、发布日期、分类标签、正文内容（支持标题、段落、代码块）、返回按钮、上一篇/下一篇导航
- ④ 关于我页面 —— 个人介绍、技能标签云、联系方式、社交链接
- ⑤ 写文章页面 —— 表单录入（标题、分类、摘要、正文），保存后文章自动出现在首页和分类页，数据存 localStorage，刷新不丢
另外还有一个全局组件：导航栏，五个页面都能跳转。
技术方案我们选 Vue 3 + Vite + Vue Router：
- Vue 3 Composition API，
<script setup>语法简洁，上手快 - Vite 构建快，项目初始化 3 秒搞定
- Vue Router 处理页面路由，URL 跳转不用刷新
- 单文件组件
.vue，模板、逻辑、样式写在一起，维护方便
第一步：在 VS Code 里启动 Claude Code
开始之前确认一件事：你的 Claude Code + CC Switch + DeepSeek 环境是跑通的状态。如果不确定，回去看第一期教程，配好了再回来。
1.1 创建工作目录
在 VS Code 里打开终端（快捷键 Ctrl + ），先创建项目文件夹：
CB0
然后用 VS Code 打开：
CB1
1.2 启动并验证
终端里输入 claude，看到 > 光标即就绪。输入 /model 确认当前模型：
CB2
看到 DeepSeek V4 就 OK。它背后走的是你配好的 CC Switch 中转，对你来说完全透明。
第二步：一键初始化 Vue 3 项目
把下面这段话粘贴进 Claude Code：
CB3
回车之后，Claude Code 会逐一分析需求、执行 npm create vite@latest、安装依赖、创建 .vue 组件、配置路由、写入样式。这个过程大概 2-3 分钟。期间 Claude Code 可能会问"是否确认执行某条命令"——直接回复 yes。
项目骨架搭好后，启动开发服务器验证：
CB4
浏览器打开 http://localhost:5173，你会看到一个能跑的网站——导航栏在顶部，点击五个链接能在页面之间切换。虽然内容还是占位的，但骨架已经立起来了。
⚠️ 如果启动报错，大概率是依赖没装全。在终端里
npm install一下再试。
第三步：填充首页 —— Hero + 文章卡片
骨架有了，往里面填肉。先做最重要的首页。
在 Claude Code 里继续粘贴：
CB5
写完保存后刷新浏览器，你会看到：醒目的 Hero 个人介绍区、6 张文章卡片整齐排列、每张卡片有标题/日期/彩色分类标签/摘要、鼠标悬停微微上浮。一个像模像样的博客首页就有了。
💡 微调技巧： 如果你觉得某个地方不满意——比如 Hero 区太高了、卡片列数不对、颜色不太喜欢——直接在 Claude Code 里说"Hero 区域高度缩小一点，文章卡片改成每行 3 张，强调色换成深蓝色 #1a73e8"。Claude Code 会读代码、定位位置、精准修改。你不用自己翻代码找 CSS。
第四步：文章分类页
首页有了，接下来做分类页。这个页面的逻辑是：把文章按分类聚合，用户可以按分类浏览。
CB6
切到浏览器，点导航栏的"分类"。四个分类卡片排列整齐，点击"前端开发"——平滑展开文章列表，再点收起。点击文章标题能跳到详情页，路由已经通了。
第五步：文章详情页 + 关于我
剩下两个展示页面，一口气搞定。
文章详情页
CB7
关于我页面
CB8
刷新浏览器，四个展示页面全部到位，导航流畅，内容完整。
从空文件夹到一个能跑的四页博客网站，你写了多少行代码？零行。
⭐ 第六步：数据录入 —— 在浏览器里写文章
这是本期最有价值的一步。 前面做的都是"展示"，现在我们要让博客"能录入"——在浏览器里直接写文章，写完就发布。
想想看：没有后端、没有数据库，但你的博客能新增文章、能存下来、刷新不丢。怎么做到的？localStorage + Vue 响应式数据。
CB9
这个 prompt 内容比较丰富，都是实打实的业务逻辑。Claude Code 会：完善 Editor.vue 表单组件 → 改造 articleStore.js 加上 localStorage 读写 → 处理新增/编辑两种模式 → 加上表单验证 → 确保首页和分类页动态展示新文章。
验证数据录入闭环
保存完后，来完整走一遍：
- 点导航栏「写文章」→ 进入编辑页面，表单清晰
- 填写标题、选分类、写摘要和正文
- 点击「保存发布」→ 页面跳转回首页
- 首页顶部出现了刚才写的新文章！
- 点进去看详情 → 所有内容完整展示
- F5 刷新 → 文章还在，数据没丢
- 点文章底部的「编辑」→ 修改内容 → 保存 → 内容已更新
一个完整的数据录入闭环：写文章 → 保存 → 首页展示 → 分类页展示 → 刷新不丢 → 编辑更新。全部跑通。
💡 看到了吗？没有后端、没有数据库，但你的博客已经能"增删改查"了。这就是前端状态管理 + localStorage 的威力。下期我们接上后端和数据库，把数据存到真正的服务器上。
下期预告：后端 + 部署
我知道有同学会问：东哥，数据存在 localStorage 里，换个浏览器就没了，而且别人访问不到啊？
没错，这正是下期要解决的问题。 下期我们会做三件事：
- ① 接入后端服务。 用 Node.js / Express 写一个简单的 API 服务，文章数据存到真正的数据库里。
- ② 数据库持久化。 用 SQLite 或者 MySQL，文章永久保存，多端都能访问。
- ③ 部署上线。 把前端 + 后端部署到服务器上，生成一个公网能访问的域名。你的博客真正"上线"。
本期先打好前端基础，下期我们再往后端延伸。 一口吃不成胖子，分两期来，每一步你都跟得上。
常见问题速查
Q1：npm create vite 卡住了？
→ 网络问题。先换淘宝镜像：npm config set registry https://registry.npmmirror.com，再重试。
Q2：页面切换后白屏？
→ 检查 Vue Router 配置，大概率是 createRouter 里的 routes 路径写错了，或者 App.vue 里没放 <router-view>。直接把报错信息粘贴给 Claude Code，它能自己排查。
Q3：样式没生效？
→ Vue 单文件组件 <style scoped> 有作用域隔离，检查样式是不是写在了正确的 .vue 文件里。有时候 Claude Code 创建了样式文件但忘了在组件里引用，跟它说"样式没生效，帮我检查 import"就行。
Q4：Claude Code 写到一半断了？
→ 很正常，DeepSeek API 偶尔会超时。重新 claude 进入，说"继续上次的任务"，它会接着写。不会从头开始。
Q5：localStorage 数据不见了？
→ 检查浏览器是否开启了无痕/隐私模式。无痕模式下 localStorage 在窗口关闭后会被清除。换成正常模式就行。
Q6：新增文章后首页没显示？
→ 检查 articleStore 的响应式是否正确，新增文章后有没有触发 Vue 的响应式更新。把现象告诉 Claude Code，让它修。
Q7：能不能用 Vue 2 / Nuxt / React？
→ 完全可以。把 prompt 里的 "Vue 3" 换成你想要的框架名就行。Claude Code 对主流前端框架都支持。思路是一样的，框架只是载体。
总结
今天我们从零开始，用 Claude Code + DeepSeek V4 + Vue 3 搭建了一个带数据录入功能的个人博客前端。回顾一下：
| 步骤 | 做了什么 | 核心 prompt 关键词 |
|------|----------|-------------------|
| 第一步 | 启动 Claude Code，创建工作目录 | claude → /model 确认模型 |
| 第二步 | 初始化 Vue 3 + Vite + Router 骨架 | "Vue 3 + Vite + Vue Router 搭建" |
| 第三步 | 填充首页：Hero 区 + 文章卡片网格 | "Hero 区域 + 文章卡片，router-link" |
| 第四步 | 文章分类页：分类卡片 + 展开动画 | "分类卡片，Transition 过渡动画" |
| 第五步 | 文章详情 + 关于我页面 | "useRoute 获取参数，上下篇导航" |
| ⭐ 第六步 | 数据录入：写文章 + localStorage | "表单录入，localStorage 持久化" |
六个 Prompt，零行手写代码，一个能展示、能录入的博客前端。
回顾这个系列：
- 第一期，我们解决了"怎么装"的问题。
- 第二期，我们解决了"怎么配"的问题。
- 第三期，我们解决了"怎么用"的问题——前端篇。
- 第四期，我们将解决"怎么上线"的问题。
环境、工具、前端、后端、部署，一条线全部串起来。
从第一期到现在，我做这个系列的目的只有一个——让你真正用起来。
网上有无数个"AI 编程太强了"的视频和文章，但很少有人告诉你：第一步怎么做、第一步卡住了怎么办、配好环境之后第一个项目做什么。
今天这个博客前端，你把它改个名字、换个头像、写几篇文章，就是一个能用的个人网站了。等下期接上后端和部署，就是一个完整的、别人能访问的线上博客。
而且，你确实是自己搭的。你指挥的，AI 执行的。
工具不会取代你，工具只是在等你会用。
跟着做出来的评论区扣个 2，卡在哪一步直接留言，我看到就会回。
我是程序员东哥，下期见。 👋
推荐阅读：
- [Claude Code免费用！国内用户零门槛AI编程环境搭建全教程]()
- [Codex CLI免费用！小白也能看懂的零门槛接入教程，DeepSeek V4 驱动]()
- CC Switch GitHub
- DeepSeek 开放平台