Nuxt — Vue 全栈元框架

背景

Nuxt 是 Vue 生态的 Next.js 对标品，基于 Nitro 引擎提供 SSR/SSG/ISR、文件路由、自动导入和模块生态，是 Vue 开发者做毕设的全栈首选。

核心概念

1. 自动导入

Nuxt 3 自动导入 Vue API 和 components/、composables/ 下的文件，无需手动 import：

<script setup lang="ts">
// 无需 import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count * 2)

// 自动导入 composables/useAuth.ts
const { user, login } = useAuth()
</script>

<template>
  <!-- 自动导入 components/MyButton.vue -->
  <MyButton @click="count++">点击: {{ count }}</MyButton>
</template>

2. 文件路由

pages/
  index.vue              → /
  about.vue              → /about
  blog/
    [slug].vue           → /blog/:slug
server/
  api/
    posts.ts             → /api/posts
    posts/[id].ts        → /api/posts/:id

3. useFetch / useAsyncData

<script setup>
// 服务端获取数据，客户端水合
const { data: posts, pending, error, refresh } = await useFetch('/api/posts')

// 带参数的
const { data: post } = await useAsyncData('post', () =>
  $fetch(`/api/posts/${route.params.id}`)
)
</script>

4. Nitro 引擎

Nuxt 底层服务端是 Nitro，支持部署到：

平台	方式
Node.js	node .output/server/index.mjs
Vercel	零配置
Netlify	零配置
Cloudflare Workers	零配置
Deno	实验性

5. Nuxt 模块

# 一行命令安装模块
npx nuxi module add content    # 文件型 CMS
npx nuxi module add tailwindcss
npx nuxi module add icon
npx nuxi module add pwa
npx nuxi module add seo

分步操作

npx nuxi@latest init grad-project
cd grad-project
npm run dev
# → http://localhost:3000

思考题

1. useFetch 和 $fetch 的区别是什么？
2. Nuxt 的 server/ 和 pages/ 分别对应什么职责？
3. Nuxt Layer 是什么？如何在多项目间复用配置？

毕设场景

• 全栈 Vue 毕设首选
• 内容网站/文档（Nuxt Content）
• SaaS MVP（Nuxt + Supabase + Stripe）