app.vue

app.vue 文件是您的 Nuxt 应用的主要组件。
如果您有一个 pages/ 目录，app.vue 文件是可选的。Nuxt 会自动包含一个默认的 app.vue，但您仍然可以添加自己的文件来根据需要自定义结构和内容。

用法

最简用法

在 Nuxt 中，pages/ 目录是可选的。如果它不存在，Nuxt 将不会包含 vue-router 依赖。这在构建登陆页或不需要路由的应用时非常有用。

app.vue
<template>
  <h1>Hello World!</h1>
</template>
Read and edit a live example in Docs > Examples > Hello World.

结合 Pages 使用

当您有一个 pages/ 目录时，您需要使用 <NuxtPage> 组件来显示当前页面：

app.vue
<template>
  <NuxtPage />
</template>

您也可以直接在 app.vue 中定义应用的通用结构。当您想要包含全局元素，如页头或页脚时，这非常有用：

app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
请记住，app.vue 作为您的 Nuxt 应用的主要组件，您添加到其中的任何内容（JS 和 CSS）都会是全局的，并包含在每个页面中。
了解如何使用 pages/ 目录来组织页面结构。

结合布局使用

当您的应用需要为不同页面使用不同布局时，您可以使用 layouts/ 目录和 <NuxtLayout> 组件。这允许您定义多个布局，并按页面应用。

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
了解如何使用 layouts/ 目录来组织布局结构。