Nuxt 是怎么跑起来的？

学习目标

理解 Nuxt 最重要的第一层架构：

Browser → app.vue → Layout → Page

后面所有知识（SSR、Hydration、Router、Data Fetch）都会建立在这个模型之上。

一、这个知识解决什么问题？

第一次创建 Nuxt 项目时，我们看到的 app.vue 非常简单：

<template>
  <NuxtPage />
</template>

看到这里，我们自然会产生几个问题：

1. <NuxtPage /> 是不是就是把 pages/index.vue 放进来了？
2. 为什么项目入口是 app.vue？
3. Header 和 Footer 放在哪里？
4. 为什么 Nuxt 还需要 Layout？

如果这几个问题没有搞清楚，后面学习 Nuxt 很容易把 app.vue、Layout 和 Page 混在一起。

二、我们的讨论过程

第一个问题

看到 <NuxtPage />，第一反应是：

它是不是就是把 pages/index.vue 放进来了？

答案：可以这样理解，但还不完整。

访问 / 对应 pages/index.vue，访问 /about 对应 pages/about.vue。

所以：

NuxtPage
≈ Vue Router 的 RouterView
≈ React Router 的 Outlet

它负责把当前路由对应的页面渲染出来。

第二个问题

既然 NuxtPage 只是页面占位符，那是不是可以这样写？

<template>
  <Header />
  <NuxtPage />
  <Footer />
</template>

乍一看没有问题。但继续思考：登录页、404 页面、后台管理页面……这些真的都需要 Header 和 Footer 吗？

答案显然不是。于是我们得到第一个重要结论：

app.vue 不应该决定页面长什么样。

第三个问题

既然 app.vue 不负责页面布局，那谁负责？答案就是 Layout。

于是 Nuxt 的三层结构出现了：

Browser
    │
    ▼
app.vue
    │
    ▼
Layout
    │
    ▼
Page

三、最终结论

Nuxt 可以简单理解成三层：

第一层：app.vue

整个应用入口，负责承载整个 Nuxt 应用。它不关心当前是什么页面、Header/Footer 长什么样，只是整个应用的根节点。

第二层：Layout

决定页面整体布局。不同页面可以使用不同 Layout：登录页用 Empty Layout，首页用 Default Layout（含 Header/Footer）。

第三层：Page

真正的业务页面：pages/index.vue、pages/about.vue、pages/login.vue。这里才是真正写业务代码的地方。

四、脑图

读图时抓住两条线：

1. 渲染线：浏览器 URL → app.vue → Layout → NuxtPage → 当前 Page
2. 职责线：app 管应用，Layout 管布局，Page 管业务

以后学习 Nuxt，大多数知识都会落到这三个层级中的某一个。

五、容易踩坑

❌ app.vue 就是首页

不是。它是整个 Nuxt 应用入口。首页真正对应的是 pages/index.vue。

❌ NuxtPage 就是 index.vue

不是。NuxtPage 是当前路由对应页面的占位符，它可能是任何一个页面。

❌ Header 一定放 app.vue

不是。应该根据页面需求放到不同的 Layout 中。

一句话记忆

app 管应用，Layout 管布局，Page 管业务。