为什么是 Nuxt
在课程项目启动时,摆在面前的第一个问题是:用纯 Vue,还是用 Nuxt?
求实博客是一个内容型站点,对 SEO(搜索引擎收录)、首屏速度和目录式路由都有要求。Nuxt 在 Vue 之上提供了文件路由、自动导入、服务端渲染(SSR)和静态生成(SSG),让我们能专注于业务本身,而不是手写路由表和打包配置。
"用对的工具,把精力留给真正重要的问题。"
三种数据方案对比
| 方案 | 优点 | 缺点 |
|---|---|---|
| @nuxt/content(Markdown 文件) | 写作体验好 | 增加依赖,构建慢 |
| 后端 API | 数据动态 | 需要额外服务端 |
| TypeScript 数据文件(本项目) | 零额外依赖、类型安全 | 内容多时文件偏长 |
考虑到课程项目要求"轻量、可控、可解释",我们选择了第三种:把文章以 Post[] 的形式集中维护在一个 posts.ts 中,配合一个自研的轻量 Markdown 解析器渲染正文。
目录结构
app/
├── components/ # 可复用组件
├── composables/ # 组合式逻辑
├── data/posts.ts # 文章数据源
├── pages/ # 文件路由
└── assets/css/ # 设计系统
小结
技术选型没有银弹。对于学习性质的项目,可读性和可解释性往往比"工业级"更重要——你应当能向同学讲清楚每一行配置在做什么。这正是我们选择 Nuxt + TS 数据文件的初衷。