Nuxt3 中文课程《实战全栈开发简书》限时优惠

视图

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/ 目录中的每个文件都表示一个不同的路由,显示其内容。

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

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

布局

布局是页面的包装器

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

如果你的应用程序只有一个布局,我们建议使用 app.vue<NuxtPage />
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

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

高级:扩展 HTML 模板

如果你只需要修改 <head>,你可以参考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) })
})
Read more in Docs > Guide > Going Further > Hooks.