1. 什麼是 `app.vue`？— 應用程式的根源

如果您的整個 Nuxt 專案是一棟房子，那 app.vue 就是這棟房子的地基與外牆。

它是所有元件的根源，您網站的所有頁面內容，最終都會被渲染在它的內部。因此，您放在 app.vue 裡的樣式或 <script> 邏輯，都會是全域性的，影響到每一個頁面。

2. 兩種主要使用情境

app.vue 的用法主要根據您的專案有沒有 pages/ 資料夾而有所不同。

當您只想做一個簡單的登陸頁或單頁應用，不需要路由時，您根本不需要 pages/ 資料夾。

在這種情況下，`app.vue` 就是您的整個應用程式。您在裡面寫什麼，頁面就顯示什麼。

app.vue

<template>
  <main>
    <h1>Hello World!</h1>
    <p>這就是我的整個網站。</p>
  </main>
</template>

這是最常見的情況。當您的專案中有 pages/ 資料夾時，app.vue 就變成了一個容器或外框。

您必須在裡面放一個 <NuxtPage /> 元件，它就像一個「畫框」，用來顯示當前頁面（例如 pages/about.vue 或 pages/contact.vue）的內容。

最常見的用法，就是把全站共用的元素（如頁首、頁尾）放在這裡。

app.vue

<template>
  <div>
    <TheHeader />

    <main>
      <NuxtPage />
    </main>
    
    <TheFooter />
  </div>
</template>

提示

如果您有使用 layouts/ 資料夾，那麼 app.vue 通常會更簡單，只包含 <NuxtLayout><NuxtPage /></NuxtLayout>。

今天我們認識了 app.vue，它是您 Nuxt 應用的最外層容器。

對於單頁應用

它是主角

對於多頁應用

它是放置 <NuxtPage /> 和全域元件的舞台

了解了地基之後，明天我們就來看看房子裡最重要的部分之一：負責內容與路由的 pages/ 資料夾。