app.vue

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

使用方法

最小使用

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

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

与页面的使用

当你有一个 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/ 目录来构建你的布局的信息。