Nuxt入门——视图 第二天

1.app.vue

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

<template>
  <div>
   <h1>Welcome to the homepage</h1>
  </div>
</template>

 在 VUE中，main.js 通常是整个应用的入口文件。这个文件的主要职责是创建 Vue 实例，并挂载到 DOM 上。它还负责全局配置，如注册全局组件、插件、过滤器和指令等。
但是呢Nuxt在幕后已经处理完了这些，极大了简化了vue的部署和开发流程，只能说他们确实做到了让开发者专注于业务逻辑和用户界面的开发

2.组件

        不得不说组件化思想真的很重要，无论是在框架上体现和在日常代码中体现尤为重要！

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

3.页面

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

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

4.布局

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

                更改页面需要进入到项目配置下layouts/default.vue  改成默认的的以及变成页面元数据的一部分（后续有详情内容去介绍它....）

5.高级：扩张HTML模板

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

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) })})

这里已经开始涉及到了NUXT的钩子函数了‘，具体研究等到学到钩子函数的那步