v3.16
Nuxt on GitHub

视图

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

app.vue

app.vue 文件是你的应用入口

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

app.vue
<template>
  <div>
   <h1>欢迎来到首页</h1>
  </div>
</template>
如果你熟悉 Vue，你可能会好奇 main.js 文件在哪里（通常用于创建 Vue 应用的入口文件）。Nuxt 在幕后完成了这一工作。

组件

组件是可复用的界面片段

大多数组件是用户界面的可复用片段，例如按钮和菜单。在 Nuxt 中，你可以在 components/ 目录中创建这些组件，它们将在整个应用中自动可用，无需显式导入。

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

页面

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

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

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

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>
阅读更多 路由部分.

布局

布局是围绕页面的包装器

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

如果你的应用只有一个布局，我们建议在 app.vue 中使用 <NuxtPage /> 来代替。
<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 }) => {
    // 这将是 HTML 模板的对象表示。
    console.log(html)
    html.head.push(`<meta name="description" content="我的自定义描述" />`)
  })
  // 你也可以在这里拦截响应。
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
阅读更多 Docs > Guide > Going Further > Hooks.