Nuxt 4 入门：Nuxt 是什么，与 Vue 和 Next.js 的区别

本节目标：理解 Nuxt 的定位，知道它解决了什么问题，能区分 Nuxt 与 Vue、Next.js 的关系，并了解 Nuxt 4 相比之前版本带来的核心变化。

你可能在某个教程里见过「用 Vue 写界面」，也听说过「用 Node 写后端」。Nuxt 就是把这两件事合在一起的框架——你用 Vue 写页面，Nuxt 顺手帮你把服务端、路由、构建、部署这些琐碎又绕不开的事一并处理好。换句话说，Nuxt 是一个基于 Vue.js 的全栈（full-stack）框架。

打个比方：Vue 像一台性能很好的发动机，你可以用它造出任何车，但底盘、变速箱、车灯都得自己配。Nuxt 是一辆已经装好的整车，发动机还是那台 Vue，但车厢、仪表、电气系统都按最佳实践接好了，你上车就能开。

1-1

单独用 Vue 做项目时，真正让人头大的往往不是写组件，而是那些「周边活」：路由要手动配、SSR（服务端渲染）要自己接、TypeScript 类型要自己调、构建打包要选工具、部署时还要区分前端和服务端。每一样单独都不难，但加起来就是一大堆重复劳动。

Nuxt 的思路是用「约定优于配置」把这些活自动化。比如你把文件放进 app/pages/ 目录，路由就自动生成了；你把组件放进 app/components/，就不需要手写 import。你专注写业务，框架在背后把工程化细节兜底。

Tip

如果你是零基础，先记住一句话：Nuxt 让你「从第一行代码就可以写 .vue 文件」，开发时有热更新，上线后默认带服务端渲染。这些都不用你操心。

1-2

很多初学者会把 Nuxt 和 Vue 当成对立的选一个。其实不是二选一，而是包含关系：Nuxt 底层就是 Vue 3。你在 Nuxt 里写的每一个页面、每一个组件，本质都是 Vue 单文件组件（.vue）。

区别在哪里？Vue 本身只负责「界面怎么渲染」，而 Nuxt 在不改动 Vue 用法的前提下，额外提供了：

基于文件的路由（app/pages/ 约定）
默认的服务端渲染能力（SSR）
组件、组合式函数的自动导入
一套服务端引擎（叫 Nitro），让你能写后端 API
零配置的 TypeScript 支持

所以更准确的说法是：Nuxt 是 Vue 之上的「全栈外壳」。你学会了 Nuxt，也就掌握了 Vue；反过来，只懂 Vue 不懂 Nuxt，也能写界面，但要用 Vue 做完整站点还得自己补很多工程能力。

1-3

Next.js 是 React 生态里和 Nuxt 定位几乎一样的框架。两者理念高度相似：都做服务端渲染、都有文件路由、都帮你打包部署。区别主要在这两点：

底层 UI 库不同：Nuxt 基于 Vue，Next.js 基于 React。这是最根本的差异，选哪个基本取决于你更想用 Vue 还是 React。
生态与风格：Nuxt 的核心引擎 Nitro 强调「部署到任何地方，包括边缘（edge）」，且 Nuxt 官方模块体系（modules）很强调开箱即用。

Note

不要因为「React 更流行」就觉得 Vue/Nuxt 弱。两者能力对等，Nuxt 的中文社区和文档质量都很高，对中文初学者反而更友好。

1-4

Nuxt 的「开箱即用」具体体现在这几件事上，先有个印象，后面章节会逐个展开：

代码分割：Nuxt 自动把代码切成小块，首屏只加载需要的，降低初始加载时间。
自动导入：在约定目录里写组合式函数（composables）和组件，直接用，不用 import，还能享受 tree-shaking。
数据获取工具：提供和 SSR 兼容的数据获取组合式函数（如 useFetch）。
配置好的构建工具：默认用 Vite，开发热更新、生产打包都内置了最佳实践。

1-5

本教程以 Nuxt 4.5.2 为基准。Nuxt 4 与 Nuxt 3 共享同一套核心（Nitro、Vue 3、Vite），主要变化集中在「目录结构默认值」和少量配置：

新的 app/ 目录约定：Nuxt 4 把 components/、composables/、pages/、layouts/、middleware/、plugins/、utils/ 等统一收进 app/ 目录（srcDir 默认指向 app）。Nuxt 3 里这些目录是平铺在项目根下的。
public/ 移动到 app/public/：静态资源目录跟随新布局。
compatibilityVersion: 4 默认开启：新项目自动启用 Nuxt 4 行为；老项目可通过这个字段逐步迁移。
spa-loading-template.html 回到根目录：纯客户端渲染时的加载模板位置有调整。
新增 shared/、modules/、layers/ 目录约定：更清晰地组织跨端共享代码、本地模块和可复用层。

Warning

如果你手上是 Nuxt 3 的老项目，直接套用本教程的 app/ 目录会报错。Nuxt 3 的差异我们只在相关章节用「兼容说明」短块提示，不会混讲。新项目请放心按 Nuxt 4 约定来。

1-6

Nuxt 的服务端引擎 Nitro 把应用和后端一起构建成一个通用的 .output 目录。这个产物非常轻量，可以部署到任何支持 JavaScript 的系统：Node.js 服务器、Serverless、Workers、边缘节点，或纯静态托管。

这意味着你写完一个 Nuxt 应用，既能当全栈站点部署到 Node 服务器，也能预渲染成纯静态文件丢到 CDN 上。没有供应商锁定（vendor lock-in），这是 Nuxt 强调的核心优势之一。

Tip

想先在浏览器里玩一下再装环境？Nuxt 官方提供在线沙盒（StackBlitz），不装任何东西就能改代码看效果。不过本教程后面会从本地环境一步步带你搭起来。

1-7

Nuxt 不是一个「新语言」，它是在 Vue 之上加了一层全栈能力：文件路由、SSR、自动导入、服务端 API、TypeScript 支持和多端部署。Nuxt 4 的核心是新的 app/ 目录约定，让项目结构更清晰。理解了这层关系，后面每一章都是在把上面提到的能力拆开讲清楚。

1-6 Nuxt 适合做什么项目

Nuxt 几乎能覆盖所有常见的 Web 项目类型。企业官网、博客、电商前台、管理后台、文档站点、SaaS 产品界面，都是 Nuxt 的强项。如果你的项目需要搜索引擎友好（SEO），或者首屏加载速度要快，Nuxt 的服务端渲染天然就有优势。

即便是纯后台管理系统，Nuxt 也能胜任。虽然这类项目对 SEO 要求不高，但 Nuxt 的文件路由、自动导入、中间件等特性可以大幅提升开发效率。很多团队用 Nuxt 做内部工具，也是因为它的约定式结构让新人上手特别快。

选择 Nuxt 还是纯 Vue，一个简单的判断标准：你的项目需要服务端渲染、静态生成、或者后端 API 吗？如果答案是”需要”或”将来可能需要”，那 Nuxt 就是更合适的起点。