用 Vue 3 重写博客前端

这个博客最初基于 Astro 与 Svelte 构建，内容写在 Markdown 文件里，构建时生成静态页面。它足够快，但一旦想让内容可以通过后台修改，静态构建就显得绕。

于是有了这次改造：保留页面的视觉与交互，把渲染层换成 Vue 3 + Vite，把数据来源换成 Spring Boot + MySQL。

为什么选择 Vue

• 组件模型和此前的 Svelte 很接近，迁移心智负担小；
• 生态完整，路由、状态与构建工具都能直接落地；
• 团队协作时，Vue 的单文件组件比 Astro 的多种文件类型更容易统一。

迁移时最容易出错的地方不是语法，而是样式作用域。Astro 的组件样式默认带作用域，Vue 的 scoped 样式则依赖编译期属性选择器，二者不能直接照搬。我的做法是把与品牌相关的全局样式整理到 src/styles，组件内部只保留布局差异。

数据契约先行

前后端并行开发时，先定接口比先写页面更重要。文章列表统一返回：

interface PostSummary {
  id: number;
  title: string;
  slug: string;
  summary: string;
  cover: string | null;
  tags: string[];
  publishedAt: string;
}

分页统一使用 pageNum 与 pageSize，返回值固定为 rows 与 total。这样列表页、归档页、搜索页可以复用同一个请求封装。

视觉如何保持不变

主题的关键不在具体组件，而在一组设计变量：主题色相、卡片底色、圆角、分隔线与字号。只要 variables.css 不变，页面看起来就还是原来的样子。Vue 版本保留了：

1. 顶部横幅与玻璃导航；
2. 左右侧栏的卡片密度；
3. 文章卡片的封面比例与标签位置；
4. 暗色模式与主题色切换。

换框架不等于换设计。样式变量是这次迁移里最值得保留的资产。

还剩下什么

评论区、全文搜索和图片灯箱都已经接上后端接口。后续可以继续补充 RSS、站内通知和更细的权限控制。

如果你也在做类似迁移，建议先从“布局壳”开始，再逐页替换。这样任何一天停下来，站点都是可用的。