---
title: "视图"
description: "Nuxt 提供了多个组件层，用来实现应用程序的用户界面。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/getting-started/views"
---
# 视图

> Nuxt 提供了多个组件层，用来实现应用程序的用户界面。

## `app.vue`

![app.vue 文件是您应用程序的入口点](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/app.svg)

默认情况下，Nuxt 会将此文件视为**入口文件**，并在应用的每个路由下渲染其内容。

```vue [app.vue]
<template>
  <div>
    <h1>欢迎来到主页</h1>
  </div>
</template>
```

::tip
如果您熟悉 Vue，可能会好奇 `main.js` 在哪里（通常是创建 Vue 应用的文件）。Nuxt 会在幕后自动处理这部分内容。
::

## 组件

![组件是可复用的 UI 片段](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/components.svg)

大多数组件都是可复用的用户界面片段，例如按钮和菜单。在 Nuxt 中，您可以在 [`components/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/components) 目录中创建这些组件，它们会自动在整个应用程序中可用，无需显式导入。

::code-group
```vue [app.vue]
<template>
  <div>
    <h1>欢迎来到主页</h1>
    <AppAlert>
      这是一个自动导入的组件。
    </AppAlert>
  </div>
</template>
```

```vue [components/AppAlert.vue]
<template>
  <span>
    <slot />
  </span>
</template>
```
::

## 页面

![页面是与特定路由相关联的视图](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/pages.svg)

页面代表每种特定路由模式对应的视图。[`pages/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages) 目录中的每个文件都代表一个不同的路由，用于显示其内容。

要使用页面，请创建一个 `pages/index.vue` 文件，并将 `<NuxtPage />` 组件添加到 [`app.vue`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/app) 中（或者移除 `app.vue`，以使用默认入口）。现在，您可以在 [`pages/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages) 目录中添加新文件，创建更多页面及其对应的路由。

::code-group
```vue [pages/index.vue]
<template>
  <div>
    <h1>欢迎来到主页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>
```

```vue [pages/about.vue]
<template>
  <section>
    <p>此页面将在 /about 路由下显示。</p>
  </section>
</template>
```
::

::read-more{title="路由章节" to="https://nuxt.zhcndoc.com/docs/3.x/getting-started/routing"}
::

## 布局

![布局是页面的包装器](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/layouts.svg)

布局是页面的包装器，包含多个页面通用的用户界面，如头部和页脚显示。布局是 Vue 文件，使用 `<slot />` 组件来展示**页面**内容。默认使用 `layouts/default.vue` 文件。自定义布局可以作为页面元数据的一部分设置。

::note
如果您的应用程序只有一个布局，我们建议使用 [`app.vue`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/app) 和 [`<NuxtPage />`](https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-page)。
::

::code-group
```vue [app.vue]
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
```

```vue [layouts/default.vue]
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>
```

```vue [pages/index.vue]
<template>
  <div>
    <h1>欢迎来到主页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>
```

```vue [pages/about.vue]
<template>
  <section>
    <p>此页面将在 /about 路由下显示。</p>
  </section>
</template>
```
::

如果您想创建更多布局并了解如何在页面中使用它们，请在[布局章节](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/layouts)中查找更多信息。

## 高级：扩展 HTML 模板

::note
如果您只需要修改 `<head>`，可以参考 [SEO 和元数据章节](https://nuxt.zhcndoc.com/docs/3.x/getting-started/seo-meta)。
::

您可以通过添加一个注册钩子的 Nitro 插件，实现对 HTML 模板的完全控制。`render:html` 钩子的回调函数允许您在 HTML 被发送到客户端之前修改它。

<!-- TODO: figure out how to use twoslash to inject types for a different context -->

```ts [server/plugins/extend-html.ts]
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // 这里的 html 是 HTML 模板的对象表示。
    console.log(html)
    html.head.push(`<meta name="description" content="我的自定义描述" />`)
  })
  // 您也可以在这里拦截响应。
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
```

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/guide/going-further/hooks"}
::


## Sitemap

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