---
title: "app.vue"
description: "app.vue 文件是您的 Nuxt 应用的主要组件。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/app"
---
# app.vue

> app.vue 文件是您的 Nuxt 应用的主要组件。

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

## 用法

### 最简用法

使用 Nuxt 时，[`pages/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages) 目录是可选的。如果该目录不存在，Nuxt 将不会包含 [vue-router](https://router.vuejs.org) 依赖项。这在构建落地页或不需要路由的应用程序时很有用。

```vue [app.vue]
<template>
  <h1>Hello World!</h1>
</template>
```

::link-example{to="https://nuxt.zhcndoc.com/docs/examples/hello-world"}
::

### 结合 Pages 使用

当您有一个 [`pages/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages) 目录时，需要使用 [`<NuxtPage>`](https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-page) 组件来显示当前页面：

```vue [app.vue]
<template>
  <NuxtPage />
</template>
```

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

```vue [app.vue]
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
```

::note
请记住，`app.vue` 作为您的 Nuxt 应用的主要组件，您添加到其中的任何内容（JS 和 CSS）都会是全局的，并包含在每个页面中。
::

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages"}
了解如何使用 `pages/` 目录组织页面。
::

### 结合布局使用

当您的应用需要为不同页面使用不同布局时，可以将 `layouts/` 目录与 [`<NuxtLayout>`](https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-layout) 组件结合使用。这样您就可以定义多个布局，并将其应用于各个页面。

```vue [app.vue]
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/directory-structure/layouts"}
了解如何使用 `layouts/` 目录组织布局。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.