视图 Views

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

入口文件

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

app.vue

vue

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

如果您熟悉 Vue，您可能想知道 main.js 在哪里(通常创建 Vue 应用程序的文件)。 Nuxt 在幕后做这件事。

组件

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

vue

app.vue

vue

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

页面

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

要使用页面，请创建 pages/index.vue 文件并将 <NuxtPage /> 组件添加到 app.vue(或删除 app.vue 作为默认条目)。

您现在可以通过在 pages/ 目录中添加新文件来创建更多页面及其相应的路由。

vue

pages/index.vue

vue

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

您将在路由部分了解更多关于页面的信息

布局

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

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

vue

layouts/default.vue

vue

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

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

高级：扩展 HTML 模板

如果只需要修改头部，可以参考SEO和meta部分。

您可以通过添加注册挂钩的 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="My custom description" />`)
  })
  // 您还可以在此处拦截响应。
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})

视图 Views

入口文件

组件

页面

布局

高级：扩展 HTML 模板

上一篇

下一篇