Nuxt4 教程
介绍
Nuxt 是什么
用 Vue 写一个纯前端项目，你总会反复遇到路由、构建、SEO 这类和业务无关的麻烦，每个项目都要自己从头搭一遍，解决方式还五花八门。
Nuxt 4 是基于 Vue.js 的全栈框架，它把上面这些基础设施一次性配好，做成约定，让所有项目用同样的方式开发，你只需要专注写页面和业务逻辑。
如果你已经学过 Vue3 教程，组件、响应式、指令等知识在 Nuxt 里全部通用，打个比方，Vue 是一堆高质量的砖瓦水泥，而 Nuxt 是已经画好图纸、通好水电、配好物业的精装房，你可以拎包入住。
一句话概括核心认知，Nuxt 等于 Vue 加上文件系统路由、服务端渲染和全栈 API 等能力。
Nuxt = Vue + 文件系统路由 + 服务端渲染（SSR）+ 全栈 API + 更多
发展历程
- 2018 年初，Nuxt 1.0 发布，确立了「约定优于配置」的文件系统路由与 SSR 方案。
- 2018 年 9 月，Nuxt 2.0 发布，借助 Webpack 4 等升级走向成熟，成为 Vue 服务端渲染的事实标准。
- 2022 年 11 月，Nuxt 3.0 发布，基于 Vue 3、Vite 与自研的 Nitro 服务器引擎重写，TypeScript 支持开箱即用。
- 2025 年 7 月，Nuxt 4.0 稳定版发布，带来新的
app/目录结构与更智能的数据获取，本教程基于 Nuxt 4 讲解。
核心能力
Nuxt 提供了一整套开箱即用的能力。
| 能力 | 说明 |
|---|---|
| 文件系统路由 | 在 app/pages/ 目录新建文件即生成路由，无需手动配置 |
| 自动导入 | 组件、组合式函数、工具函数免 import，即写即用 |
| 服务端渲染（SSR） | 默认在服务器生成 HTML 再发给浏览器，SEO 好、首屏快 |
| 全栈能力 | server/ 目录可以直接写后端 API，前后端一个项目 |
| 内置工具链 | 打包、类型检查、环境变量、状态管理开箱即用 |
| 一键部署 | 同一份代码可部署到 Node 服务器、Vercel、Cloudflare 等平台 |
SPA 与 SSR
上面表格里提到服务端渲染（SSR），它和传统纯 SPA（单页应用）有本质区别，理解这个区别，是理解 Nuxt 一切特性的基础。
| 对比维度 | 纯 SPA 应用 | Nuxt SSR 应用 |
|---|---|---|
| 页面来源 | 浏览器收到一个空 HTML，靠 JS 渲染内容 | 服务器渲染好完整 HTML，浏览器直接显示 |
| 首屏速度 | 慢，要等 JS 下载执行 | 快，内容随 HTML 一起到达 |
| SEO | 搜索引擎很难看到内容 | 搜索引擎直接读取 HTML 中的内容 |
| 数据获取 | 只能在浏览器发起请求 | 服务器先获取数据再渲染 |
| 交互体验 | 切换路由不刷新页面 | 切换路由同样不刷新（hydration 接管） |
水合（hydration）
SSR 的核心机制叫 hydration（水合），流程是这样的：
- 用户请求页面，服务器执行 Vue 代码，渲染出完整 HTML 并返回
- 浏览器立即显示这个 HTML，用户马上能看到内容
- 浏览器下载 JS 代码，Vue 在后台重新执行一遍，把静态 HTML 变成可交互的响应式应用
也就是说，同一个页面经历了服务端渲染和客户端渲染两次执行，浏览器端的那次”接管”就是 hydration。
这就是为什么同一个 useFetch 请求在服务端和客户端都能执行，数据还能保持一致。
前置准备
开始之前建议先掌握下面这些内容。
- Vue3 基础（Vue3 教程）：组件、响应式、组合式函数是 Nuxt 开发的根基，Nuxt 完全复用 Vue 的知识。
- npm（NPM 教程）：创建项目、安装依赖都要用到，至少会用
npm install与npm run dev。 - TypeScript 基础（TypeScript 教程）：Nuxt 默认使用 TypeScript，但为了降低难度，本教程示例不写类型，跟着抄即可，想深入了解可学。
参考资料
本教程在编写过程中参考了下列资料：