---
title: "Nuxt 3 项目从零到部署：我的博客搭建实录"
description: "记录使用 Nuxt 3 + Nuxt Content + Tailwind CSS 搭建个人博客的完整过程，从项目初始化到部署上线。"
date: "2026-06-08"
tags: ["Nuxt", "前端", "博客"]
image: ""
---

## 为什么选 Nuxt 3

搭博客的方案有很多：Hexo、Hugo、Gatsby、Next.js……我最终选了 Nuxt 3，几个原因：

- **Vue 生态**：我日常工作主要用 Vue，Nuxt 是最自然的选择
- **Nuxt Content**：基于文件的内容管理，Markdown 直接放仓库，不需要数据库
- **开箱即用**：SSR / SSG / 自动路由 / 代码高亮 / SEO，配置量极少
- **Tailwind CSS**：通过 `@nuxtjs/tailwindcss` 模块一行引入

## 项目结构

```
my_nuxt_blog/
├── content/
│   ├── zh/articles/      # 中文文章
│   └── en/articles/      # 英文文章
├── pages/
│   ├── index.vue         # 首页文章列表
│   ├── [...slug].vue     # 文章详情（动态路由）
│   └── about.vue         # 关于页
├── app.vue               # 根布局
└── nuxt.config.ts
```

非常简洁，没有冗余。

## 关键实现

### 文章列表

```vue
<script setup lang="ts">
const { locale } = useI18n()
const { data: articles } = await useAsyncData(`home-articles-${locale.value}`, () =>
  queryContent(`/${locale.value}/articles`)
    .sort({ date: -1 })
    .find()
)
</script>
```

`queryContent` 是 Nuxt Content 提供的 composable，自动扫描 `content/` 目录下的 Markdown 文件，解析 frontmatter 和正文。

### 动态路由

`pages/[...slug].vue` 是一个 catch-all 路由，通过 `queryContent(route.path).findOne()` 加载对应文章，404 时自动触发 `createError`。

### 文章样式

用自定义 prose 类控制 Markdown 渲染样式，字体选用 Noto Serif SC 和 Noto Sans SC，走温暖素雅的暖色调路线。

## 部署

构建输出是标准的 Node.js 服务，一条 `npm run build` 即可。搭配 Docker 或直接 Node 进程跑都很方便。

## 小结

整个博客从零到上线不到一天，Nuxt 3 的开发体验确实出色。接下来计划加入 RSS、sitemap、图片懒加载等小功能。