视图

Nuxt 提供了多层组件结构来构建应用的用户界面。

`app.vue`

app.vue 文件是应用的入口

默认情况下，Nuxt 将这个文件作为入口文件，应用的每个路由都会渲染它的内容。

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

如果你熟悉 Vue，可能会问 main.js 去哪了（通常创建 Vue 应用的那个文件）。Nuxt 在后台自动处理了。

组件

组件是可复用的 UI 片段

大多数组件都是可复用的 UI 片段，比如按钮、菜单等。在 Nuxt 中，你可以在 app/components/ 目录下创建这些组件，它们会自动在整个应用中可用，无需手动 import。

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <AppAlert>
      这是一个自动导入的组件。
    </AppAlert>
  </div>
</template>

<template>
  <span>
    <slot />
  </span>
</template>

页面

页面是绑定到特定路由的视图

页面代表每个具体路由对应的视图。app/pages/ 目录下的每个文件都对应一个不同的路由，展示其内容。

要使用页面功能，创建 app/pages/index.vue 文件，并在 app/app.vue 中添加 <NuxtPage /> 组件（或者直接删除 app/app.vue 使用默认入口）。之后你只需要在 app/pages/ 目录下添加新文件，就能创建对应的页面和路由。

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>

<template>
  <section>
    <p>这个页面会显示在 /about 路由下。</p>
  </section>
</template>

布局

布局是包裹页面的外壳

布局是包裹页面的外壳，包含多个页面共用的 UI（比如头部和底部）。布局是 Vue 文件，使用 <slot /> 组件来显示页面内容。默认使用 app/layouts/default.vue，自定义布局可以在页面元数据中指定。

如果你的应用只有一个布局，建议直接使用 app/app.vue 配合 <NuxtPage /> 即可。

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>

<template>
  <section>
    <p>这个页面会显示在 /about 路由下。</p>
  </section>
</template>

如果你想创建更多布局并学习如何在页面中使用，查看布局章节了解更多。

进阶：扩展 HTML 模板

如果你只需要修改 <head>，可以参考 SEO 和 Meta 章节。

你可以通过添加一个 Nitro 插件注册 hook 来完全控制 HTML 模板。 render:html hook 的回调函数允许你在 HTML 发送到客户端之前修改它。

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