视图

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

app.vue

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

app/app.vue
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>
如果您熟悉 Vue，您可能会想知道 main.js 在哪里（通常创建 Vue 应用程序的文件）。Nuxt 在幕后完成了此操作。

组件

大多数组件是用户界面的可重用部分，如按钮和菜单。在 Nuxt 中，您可以在 app/components/ 目录中创建这些组件，它们将自动在您的应用程序中可用，而无需明确导入。

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

页面

页面表示每个特定路由模式的视图。 app/pages/ 目录中的每个文件都代表一个显示其内容的不同路由。

要使用页面，请创建一个 app/pages/index.vue 文件并将 <NuxtPage /> 组件添加到 app/app.vue 中（或删除 app/app.vue 以使用默认入口）。您现在可以通过在 app/pages/ 目录中添加新文件来创建更多页面及其对应的路由。

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>
在 路由部分 阅读更多内容。

布局

布局是围绕页面的包装器，包含多个页面的通用用户界面，如页眉和页脚显示。布局是使用 <slot /> 组件显示页面内容的 Vue 文件。默认情况下将使用 app/layouts/default.vue 文件。自定义布局可以作为页面元数据的一部分进行设置。

如果您的应用程序中只有一个布局，我们建议改用带有 <NuxtPage /> 的 app/app.vue。
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

如果您想创建更多布局并学习如何在页面中使用它们，请在布局部分中查找更多信息。

高级：扩展 HTML 模板

如果您只需要修改 <head>，您可以参考 SEO 和元数据部分。

您可以通过添加一个注册钩子的 Nitro 插件来完全控制 HTML 模板。render:html 钩子的回调函数允许您在 HTML 发送给客户端之前对其进行修改。

server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // This will be an object representation of the html template.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // You can also intercept the response here.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
在 文档 > 4 X > 指南 > 深入 > 钩子 中阅读更多内容。