--- title: "视图" description: "Nuxt 提供了多个组件层来实现应用的用户界面。" canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/getting-started/views" --- # 视图 > Nuxt 提供了多个组件层来实现应用的用户界面。 ## `app.vue` ![app.vue 文件是应用的入口点](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/app.svg) 默认情况下，Nuxt 会将此文件视为 **入口点**，并在应用的每个路由中渲染其内容。 ```vue [app/app.vue] ``` 如果你熟悉 Vue，可能会好奇 `main.js` 在哪里（通常用于创建 Vue 应用的文件）。Nuxt 会在后台处理这部分内容。 ## 组件 ![组件是可重用的 UI 片段](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/components.svg) 大多数组件都是可重用的用户界面片段，例如按钮和菜单。在 Nuxt 中，你可以在 [`app/components/`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/components) 目录中创建这些组件，它们将在整个应用中自动可用，无需显式导入。 ```vue [app/app.vue] ``` ```vue [app/components/AppAlert.vue] ``` ## 页面 ![页面是与特定路由关联的视图](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/pages.svg) 页面表示每种特定路由模式对应的视图。`[`app/pages/`](/docs/4.x/directory-structure/app/pages)` 目录中的每个文件都代表一条不同的路由，并显示其内容。 要使用页面，请创建一个 `app/pages/index.vue` 文件，并在 [`app/app.vue`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/app) 中添加 `` 组件（或者移除 `app/app.vue`，以使用默认入口）。现在，你可以在 [`app/pages/`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/pages) 目录中添加新文件，创建更多页面及其对应的路由。 ```vue [app/pages/index.vue] ``` ```vue [app/pages/about.vue] ``` ## 布局 ![布局是页面的外壳](https://nuxt.zhcndoc.com/assets/docs/getting-started/views/layouts.svg) 布局是页面的外壳，为多个页面提供通用的用户界面，例如页眉和页脚。布局是使用 `` 组件来显示**页面**内容的 Vue 文件。`app/layouts/default.vue` 文件将作为默认布局使用。自定义布局可以在页面元数据中设置。 如果你的应用只有一个布局，我们建议使用 [`app/app.vue`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/app) 和 [``](https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-page)，而不是布局。 ```vue [app/app.vue] ``` ```vue [app/layouts/default.vue] ``` ```vue [app/pages/index.vue] ``` ```vue [app/pages/about.vue] ``` 如果你想创建更多布局并了解如何在页面中使用它们，请参阅[布局部分](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/layouts)，了解更多信息。 ## 高级：扩展 HTML 模板 如果你只需要修改 ``，可以参阅 [SEO 和元数据部分](https://nuxt.zhcndoc.com/docs/4.x/getting-started/seo-meta)。 你可以通过添加一个注册钩子的 Nitro 插件来完全控制 HTML 模板。 `render:html` 钩子的回调函数允许你在 HTML 发送到客户端之前对其进行修改。 ```ts [server/plugins/extend-html.ts] export default defineNitroPlugin((nitroApp) => { nitroApp.hooks.hook('render:html', (html, { event }) => { // 这是 html 模板的对象表示。 console.log(html) html.head.push(``) }) // 你也可以在这里拦截响应。 nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) }) }) ``` ## Sitemap See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.