v3
GitHub

视图

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

app.vue

app.vue 文件是您应用程序的入口点

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

app.vue
<template>
  <div>
   <h1>欢迎来到主页</h1>
  </div>
</template>
如果您熟悉 Vue，可能会好奇 main.js 在哪里（通常是创建 Vue 应用的文件）。Nuxt 会在幕后自动处理这部分内容。

组件

组件是可复用的 UI 片段

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

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

页面

页面是与特定路由相关联的视图

页面代表每个特定路由模式对应的视图。[pages/](/docs/guide/directory-structure/pages) 目录中的每个文件都对应一个不同的路由，并展示其内容。

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

<template>
  <div>
    <h1>欢迎来到主页</h1>
    <AppAlert>
      这是一个自动导入的组件
    </AppAlert>
  </div>
</template>
Read more in 路由章节.

布局

布局是页面的包装器

布局是页面的包装器，包含多个页面通用的用户界面，如头部和页脚显示。布局是 Vue 文件，使用 <slot /> 组件来展示页面内容。默认使用 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 是 HTML 模板的对象表示。
    console.log(html)
    html.head.push(`<meta name="description" content="我的自定义描述" />`)
  })
  // 您也可以在这里拦截响应。
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
Read more in Docs > Guide > Going Further > Hooks.