app.vue

app.vue 文件是你 Nuxt 应用程序的主要组件。

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

用法

使用 Nuxt，pages/ 目录是可选的。如果它不存在，Nuxt 将不会包含 vue-router 依赖项。这在构建着陆页(landing page)或不需要路由的应用程序时非常有用。

app.vue

<template>
  <h1>Hello World!</h1>
</template>

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

.nuxtrc

.nuxtrc 文件允许你以扁平语法定义 Nuxt 配置。

app.config.ts

使用 App Config 文件在你的应用程序中公开响应式配置。