Nuxt 简介
为什么需要 Nuxt？
如果你用 Vue 开发过项目，一定遇到过这些问题：
| 痛点 | 具体表现 |
|---|---|
| SEO 差 | Vue 是客户端渲染（CSR），搜索引擎爬虫看到的是空 HTML，你的内容根本搜不到 |
| 首屏白屏 | 用户打开页面后，要等 JS 下载完、执行完，才能看到内容 |
| 手动配置繁琐 | 路由、状态管理、构建工具、SSR……每个都要手动配，配完还要调试 |
| 前后端分离麻烦 | 前端一个项目、后端一个项目，联调、部署、跨域……问题不断 |
Nuxt 正是为解决这些问题而设计的。 它不是一个全新的框架，而是 Vue 的"增强包"——在 Vue 的基础上，将路由、SSR、全栈开发等能力全部自动化。
一句话理解
Vue 是手动挡，Nuxt 是自动挡。底层都是同一辆车（Vue），但 Nuxt 让你开得更轻松。
什么是 Nuxt？
Nuxt 是一个基于 Vue.js 的免费开源全栈框架，旨在让 Web 开发变得直观且高效。它提供了一套完整的约定和工具链，让你可以专注于编写 .vue 文件，同时享受开发时的热模块替换（HMR）和生产环境的服务端渲染（SSR）。
当前最新版本为 Nuxt 4.4（2026 年发布），基于 Vue 3 + Vite 构建。
核心优势
1. 自动化与约定
Nuxt 使用约定优于配置的理念，通过目录结构自动完成重复性任务：
| 约定 | 你要做的 | Nuxt 自动做的 |
|---|---|---|
| 文件路由 | 在 app/pages/ 下创建 .vue 文件 | 自动生成路由配置 |
| 代码分割 | 什么都不用做 | 自动拆分代码为更小的块 |
| 服务端渲染 | 默认就是 SSR | 无需手动配置 |
| 自动导入 | 把组件/函数放到约定目录 | 无需写 import 语句 |
| TypeScript | 直接用 | 自动生成类型声明 |
"约定优于配置"是什么意思？
就像坐地铁——你不需要告诉司机怎么走（配置），只要按站名上车（约定），就能到目的地。Nuxt 规定了"文件放在这个目录就自动有什么效果"，你只要遵守约定，就不需要写一堆配置代码。
2. 全栈能力
Nuxt 内置服务端引擎 Nitro，使你能同时开发前端和后端：
| 能力 | 说明 | 代码位置 |
|---|---|---|
| 服务端 API 路由 | 写接口、查数据库 | server/api/ |
| 服务端中间件 | 请求拦截、权限验证 | server/middleware/ |
| 服务端工具函数 | 数据库连接、加密等 | server/utils/ |
| 跨平台部署 | 一套代码，到处运行 | nuxt.config.ts 中配置 |
这意味着什么？ 以前你需要分别维护一个 Vue 前端项目和一个 Node.js 后端项目，现在一个 Nuxt 项目即可满足全部需求。
独立开发者福音
你不需要学 Express/Koa/NestJS 这些后端框架，Nuxt 的 server/ 目录就能满足大部分后端需求。降低了学习成本，也降低了项目维护成本。
3. Nuxt 4 的新特性
相比 Nuxt 3，Nuxt 4 带来了以下重要改进：
| 特性 | 说明 | 对你的影响 |
|---|---|---|
| app/ 目录 | 应用代码统一放入 app/ 目录，与项目根目录分离 | 项目结构更清晰，前后端代码不混在一起 |
| shared/ 目录 | 前后端共享代码的专用目录 | 工具函数、类型定义等不用写两遍 |
| 智能数据获取 | useAsyncData/useFetch 多组件同 key 自动共享数据 | 性能更好，不用手动管理请求去重 |
| 更好的 TypeScript | 为 app、server、shared 分别创建 TypeScript 项目 | 类型检查更准确，不容易出错 |
| 更快的 CLI | 内部 socket 通信、原生文件监听、V8 编译缓存 | 开发体验更流畅 |
| createUseFetch | 创建自定义的 useFetch 实例（v4.4+） | 封装公共请求逻辑（如鉴权头），不用每次手动传 |
| vue-router v5 | 升级到 vue-router v5，不再依赖 unplugin-vue-router | 路由更稳定，类型化路由支持更好 |
| useAnnouncer | 新的无障碍广播组合式函数（v4.4+） | 让应用对屏幕阅读器更友好 |
Nuxt 与 Vue 的关系
Vue.js — 渐进式 JavaScript 框架（UI 层）
├── Vue Router — 路由管理
├── Pinia — 状态管理
└── Vite — 构建工具
Nuxt — 基于 Vue 的全栈框架
├── Vue 3 — UI 框架
├── Vite — 开发构建
├── Nitro — 服务端引擎（h3）
├── vue-router — 路由（自动配置）
└── 自动化体系 — 文件路由、自动导入、SSR 等简单来说：Vue 是 Nuxt 的基础，Nuxt 是 Vue 的全栈增强版。
| 对比 | 用 Vue | 用 Nuxt |
|---|---|---|
| 路由 | 手动安装 vue-router，写路由配置 | 创建文件就自动生成路由 |
| SSR | 手动配置，非常复杂 | 默认就有，零配置 |
| SEO | 需要额外方案（预渲染等） | 内置 SSR，天然友好 |
| 状态管理 | 手动安装 Pinia | 可用 useState，或安装 Pinia |
| 后端 API | 需要单独的后端项目 | server/ 目录即可实现 |
| 自动导入 | 手动写每个 import | 约定目录下自动导入 |
| 部署 | 只能部署为 SPA | SSR / SSG / CSR / Edge 多种模式 |
INFO
️ 注意：Nuxt 不是一个"替代 Vue"的东西 它是 Vue 的超集。所有 Vue 的知识（组件、响应式、组合式 API）在 Nuxt 中完全适用。学好 Vue 是学好 Nuxt 的前提。
何时使用 Nuxt？
| 场景 | 推荐 | 原因 |
|---|---|---|
| 需要良好 SEO 的网站（博客、电商、官网） | ✅ 强烈推荐 | SSR 让搜索引擎能看到完整内容 |
| 全栈应用（前后端统一项目） | ✅ 强烈推荐 | server/ 目录直接写 API |
| 需要快速首屏加载 | ✅ SSR 带来优势 | 用户看到的不再是白屏 |
| 纯后台管理系统 | ⚠️ 可用，但 CSR 模式即可 | 后台不需要 SEO，设 ssr: false |
| 简单的静态展示页 | ⚠️ 可用，但可能过重 | 如果只有 1-2 个页面，Vue 就够了 |
| 移动端 App | ❌ 不适用 | 考虑 Capacitor 或原生开发 |
独立开发者的选择建议
如果你一个人要同时做前端和后端，Nuxt 是最佳选择——一套代码、一个项目、一次部署，大幅降低开发和维护成本。
学习资源
- 官方文档：https://nuxt.com/docs
- GitHub：https://github.com/nuxt/nuxt
- Discord 社区：https://discord.com/invite/nuxt
知识脉络
你在这里 → Nuxt 简介
│
├─→ 安装与创建项目 ──→ 开发服务器 ──→ 第一个页面 ──→ 项目配置
│
└─→ 接下来学：安装与创建项目