初识 Nuxt
Nuxt 是基于 Vue 3 与 Nitro 的开源全栈框架。它能把一堆 .vue 文件直接变成一个生产级应用：SSR、文件式路由、自动导入、通用部署，全部开箱即用。
为什么选 Nuxt？
- 约定优于配置：一套有主张的目录结构，自动化搞定重复劳动。
- SSR 默认开启：首屏更快、SEO 更好、低性能设备也友好。
- 随处部署：Node、Deno、静态托管、Serverless、Edge 都支持，没有厂商锁定。
- 同构数据获取：
useFetch/useAsyncData在服务端与客户端行为一致。 - 零配置 TypeScript：类型和
tsconfig.json自动生成，不需要配置。 - 模块生态成熟：Pinia、Tailwind、Content、Image、i18n、Auth Utils…… 一行命令装上。
框架自带能力
- 文件式路由：
app/pages/下每个文件就是一条路由。 - 代码分割：每个路由只加载最小的 JS。
- 自动导入：组件、composable、工具函数都不需要手动
import。 - SEO 辅助：
useHead、useSeoMeta、<Title>、<Meta>。 - 错误边界：
error.vue、NuxtErrorBoundary、createError。 - 混合渲染：通过
routeRules为每条路由指定 SSR / ISR / SWR / 预渲染 / 纯 CSR。
服务端引擎：Nitro
Nitro 是 Nuxt 的 HTTP 引擎，内部基于 h3，带来：
- 完整的服务端能力（
server/api、server/middleware）。 - 15+ 部署预设，一键输出到 Vercel / Netlify / Cloudflare Workers / AWS Lambda / Deno 等。
- 通过
routeRules实现混合渲染。
生产环境构建后只生成一个 .output/ 目录，可以运行在任何 JS 运行时上。
架构一瞥
Nuxt 由若干单一职责的包组成：
- 核心引擎：
nuxt - 打包器：
@nuxt/vite-builder、@nuxt/rspack-builder、@nuxt/webpack-builder - CLI：
@nuxt/cli - 服务端引擎：
nitro - 开发套件：
@nuxt/kit（用于编写模块与 Layer）
Nuxt 与 Next.js 对照
| 维度 | Nuxt (Vue) | Next.js (React) |
|---|---|---|
| 路由 | app/pages/ 文件式 |
app/ 文件式 |
| 渲染 | SSR / SSG / ISR / CSR（routeRules） |
SSR / SSG / PPR / ISR（App Router） |
| 数据获取 | useFetch、useAsyncData、$fetch |
Server Components、fetch、use() |
| 服务端原语 | Nitro + server/api |
Route Handlers + Server Actions |
| 运行时目标 | Node / Deno / Workers / Edge / 静态 | Node / Vercel / Adapter |
两者都推崇“App Router + 约定”。Nuxt 更强调约定与预设，Next.js 更押注 React Server Components。
本书会讲什么
整本书 16 章，围绕 Nuxt 4 的实战路线展开：
- 文件系统如何映射到你的应用（视图、页面、布局、资源）。
- 如何在服务端和客户端安全地获取、修改、缓存与共享数据。
- 如何把 SEO、过渡动画、错误处理、混合渲染这些生产特性落地。
- 如何用 Layer、模块与自定义部署扩展 Nuxt。
准备好了？先装上它，写下第一页。
