v3.17

app.vue

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

用法

¥Usage

最小用法

¥Minimal Usage

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

¥With Nuxt, the pages/ directory is optional. If it is not present, Nuxt will not include the vue-router dependency. This is useful when building a landing page or an application that does not require routing.

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

与页面一起使用

¥Usage with Pages

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

¥When you have a pages/ directory, you need to use the <NuxtPage> component to display the current page:

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

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

¥You can also define the common structure of your application directly in app.vue. This is useful when you want to include global elements such as a header or footer:

app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
请记住，app.vue 是 Nuxt 应用的主要组件。你添加到其中的任何内容（JS 和 CSS）都将是全局的，并包含在每个页面中。

:

Read more in Docs > Guide > Directory Structure > Pages.

了解更多关于如何使用 pages/ 目录构建页面的信息。

¥Learn more about how to structure your pages using the pages/ directory.

::

与布局一起使用

¥Usage with Layouts

当你的应用需要为不同页面使用不同的布局时，你可以将 layouts/ 目录与 <NuxtLayout> 组件一起使用。这允许你定义多个布局并将它们应用于每个页面。

¥When your application requires different layouts for different pages, you can use the layouts/ directory with the <NuxtLayout> component. This allows you to define multiple layouts and apply them per page.

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

:

Read more in Docs > Guide > Directory Structure > Layouts.

了解更多关于如何使用 layouts/ 目录构建布局的信息。

¥Learn more about how to structure your layouts using the layouts/ directory.

::