Nuxt 3 入门指北 — 从零搭建一个现代博客

为什么选择 Nuxt 3？

作为一个前端开发者，我一直想搭建自己的个人博客。在比较了 Next.js、Astro、VitePress 等方案后，最终选择了 Nuxt 3。理由很简单：

• 🎯 Vue 3 生态：我主要用 Vue，Nuxt 是 Vue 生态最成熟的全栈框架
• 📝 Nuxt Content：基于 Markdown 的内容管理，写文章就像写代码
• ⚡ SSG 模式：构建时生成静态 HTML，部署到 Vercel 秒开
• 🎨 Tailwind CSS：原子化 CSS，主题定制灵活

项目初始化

创建 Nuxt 3 项目非常简单：

npx nuxi@latest init ninja-blog
cd ninja-blog
pnpm install
pnpm dev

打开 http://localhost:3000，一个基础的 Nuxt 应用就跑起来了。

理解文件路由

Nuxt 3 使用文件系统路由——pages/ 目录下的文件结构自动生成 URL 路由，完全不需要手动配置 router.js：

其中 [...slug].vue 的 [] 是动态参数，... 表示捕获任意层级的路径。搭配 @nuxt/content，它能自动将 content/ 目录下的 .md 文件映射为页面。

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData('page-' + route.path, () => {
  return queryContent(route.path).findOne()
})

if (!page.value) {
  throw createError({ statusCode: 404, message: 'Page not found' })
}
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
</template>

Tailwind CSS 集成

Nuxt 3 配合 Tailwind CSS 有两种方式：

方案一：@nuxtjs/tailwindcss 模块（推荐常规项目）

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
})

一行搞定，模块自动处理 PostCSS 配置和内容扫描。

方案二：手动配置（特殊场景）

如果你需要完全控制 Tailwind 版本和 PostCSS 配置，可以手动安装：

pnpm add -D tailwindcss postcss autoprefixer

然后在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

暗色模式

Nuxt 的 @nuxtjs/color-mode 模块提供了开箱即用的暗色/亮色切换：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    classSuffix: '',
    preference: 'system',   // 跟随系统
    fallback: 'dark',       // 默认暗色
  },
})

在组件中使用：

<script setup lang="ts">
const colorMode = useColorMode()

function toggleTheme() {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <button @click="toggleTheme">
    {{ colorMode === 'dark' ? '☀️' : '🌙' }}
  </button>
</template>

结合 Tailwind 的 darkMode: 'class' 配置，在 CSS 中定义 .dark 下的变量就能实现全局主题切换。

小结

用 Nuxt 3 搭建博客的体验非常流畅。文件路由 + Nuxt Content 的组合让内容管理变得简单，让你专注于写文章本身。

下一步计划：

• 项目初始化
• 火影主题皮肤
• 评论系统（Supabase）
• 游戏化系统

代码如忍术，练习多了自然得心应手 🍥