app.vue

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

使用

最简用法

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

app/app.vue
<template>
  <h1>Hello World!</h1>
</template>
在 Docs > 4 X > Examples > Hello World 中阅读并编辑在线示例。

配合页面使用

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

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

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

app/app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
请记住，app.vue 充当你的 Nuxt 应用的主组件。你添加到其中的任何内容（JS 和 CSS）都将是全局的，并包含在每个页面中。
了解更多关于如何使用 app/pages/ 目录构建页面结构的信息。

配合布局使用

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

app/app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
了解更多关于如何使用 app/layouts/ 目录构建布局结构的信息。