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>
在 文档 > 4 X > 示例 > 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/ 目录来构造布局的更多信息。