Nuxt3 + Naive UI 的SSG项目分享（三）

入口文件app.vue

最初启动的项目中，在入口文件app.vue中，我们可以看到页面引入组件 NuxtWelcome ：

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

它是Nuxt3项目安装时默认引入的欢迎页的组件，我们可以在 node_modules@nuxt\ui-templates\dist\templates 目录下找到 welcome.vue 的文件：

它是在Nuxt3项目自带的.nuxt目录下的components.d.ts里面注册并且自动导入的：

里面我们可以看到welcome被自动导入并且取了NuxtWelcome的组件名称：

这就是Nuxt3项目的自动导入，在 Nuxt3 的约定下，用户在页面文件上使用到的Nuxt3的标签将会被系统自动识别导入到应用程序，以供全局使用。

注意：app.vue是 Nuxt 应用程序的入口组件。在这里面添加的任何内容（JS 和 CSS）都是全局的，会影响到其他页面。

自动导入

上面说到了的是Nuxt3项目使用到一些Nuxt3框架自带的一些标签的自动导入，下面则将介绍Nuxt3项目涉及到的所有的自动导入。
在Nuxt3项目中，有两种自动导入，一种是Vue3的自动导入，另一种则是Nuxt3的自动导入；

Vue3的自动导入：

1.script setup，也就是我们常用到的setup语法糖；
2.使用setup语法糖，这些ref，reactive，computed 等等 Vue3 的相关方法；
3.事件传递和组件传值，defineProps ，defineEmits ，defineExpose ；

Nuxt3自动导入：

1.数据获取的方法：useAsyncData ，useLazyAsyncData ，useFetch ，useLazyFetch（注意：他们只能在setup或者是生命周期钩子中使用）；
2.跨组件状态共享 useState （useState 仅在 setup 和 生命周期钩子 中生效） ；
3.访问运行时配置 useRuntimeConfig （useRuntimeConfig 仅在 setup函数 或 生命周期钩子 内有效）（注意：客户端和服务器端的行为是不同的）；
4.创建一条响应式的cookie记录的引用 useCookie ；
5.assets目录下存放的静态图片等资源；
6.components目录下存放 Vue 的相关组件，也就是 .vue 结尾的页面；
7.composables目录下面存放 Vue 的可组合API组件，也就是 ts 文件；

组件导入

Nuxt3项目并不需要利用 import 去导入组件并且注册使用，它会自动查找 components 目录下的文件，将文件名作为组件名，来自动引入我们的组件。而如果组件的文件没有存放在 components 目录下，则不会自动导入。
命名组件
关于命名组件，我们需要注意的是：
1.组件的名称将基于自己的路径和文件名；
2.命名可以用横杠 - 隔开单词，可以单驼峰命名，也可以双驼峰命名；
以下的参考组件命名示例的效果是一样的：

1.SearchResult
2.search-result
3.Search-result
4.search-Result

在页面上都可以用这样来引入组件：

<SearchResult></SearchResult>

3.如果出现多个像以上四个命名方式的一样的组件，则最新创建的组件文件会覆盖前面的组件文件；

引入组件
我们可以在全部文件都可以引入自动导入的组件，也包括同等级目录的组件文件。（当然需要注意的是：除自身文件外！）

可组合API逻辑导入

在Nuxt3项目中，在 composables 目录下创建的组合逻辑文件将会被系统自动识别导入到应用程序，以供全局使用。

默认导出以文件名的方式来进行默认导出使用，文件名必须使用单驼峰来命名。

但需要注意的是，这里的默认自动识别导入只能是一级目录，如果需要自动导入在 composables 目录下新建文件夹的里面的组合逻辑文件的话，如 composables 目录下的 actions 目录下的useSearch.ts ：

我们需要在 nuxt.config.ts 中进行一定的设置：

export default defineNuxtConfig({

  ......
  imports: {
    dirs: ["composables", 'composables/**']
  },
})

项目布局

Nuxt3 提供了一个可定制的布局架构，可以在整个项目使用到它。而所有页面布局文件放置在 layouts/ 目录中。
我们可以在页面设置 layout 属性来使用这些布局。

<script>
export default {
  layout: 'custom',
}
</script>

default

同时我们可以设置一个默认布局，只需要将文件命名为 default ，而默认布局我们并不需要指定 layout 属性，它是Nuxt3项目自动选择的。

slot

我们还可以结合 slot 标签来使用指定加载内容的位置，它的使用方式和Vue3一样。

其他事项

如果使用了 setup 语法糖，那么则需要使用辅助的 script 标记根据需要设置 layout 选项。

<script>
export default {
  layout: 'custom',
}
</script>

<script setup>
// setup 内容
</script>

常用的Nuxt3组件的标签

ClientOnly

Nuxt 提供了 ClientOnly 组件，是专门在客户端渲染组件的组件。只在客户端导入组件或在客户端插件中注册该组件。

<template>
  <div>
    <Sidebar />
    <ClientOnly>
      <!-- 该组件只会在客户端渲染 -->
      <Comments />
    </ClientOnly>
  </div>
</template>

NuxtPage

Nuxt3 提供的路由出口标签 NuxtPage ，一般在 Nuxt 3 应用程序中的入口组件app.vue使用。

<template>
  <div>
    <!-- 路由出口 -->
    <NuxtPage />
  </div>
</template>

由于 Nuxt 3 的路由出口 NuxtPage 在内部使用了 Suspense标签 ，因此建议只有一个根节点。

NuxtLayout

Nuxt3 提供的通用布局标签 NuxtLayout ，我们可以通过name属性指定布局模板的文件名来设置布局模板。

<template>
  <NuxtLayout name="custom">
    <template #header> 一些标题模板内容。 </template>

    页面的其余部分
  </NuxtLayout>
</template>

<script>
export default {
  layout: false,
}
</script>

同时，我们还可以通过layout来获得完全的控制权。

NuxtLink

用于应用程序的页面之间导航，相当于 Vue-Router 的 RouterLink ，类似于 HTML 的 a 标签。

1.NuxtLink 组件应该用于所有内部链接。这意味着所有在网站内的页面的链接跳转，都应该使用 NuxtLink 。
2.a 标签应该用于所有外部链接的跳转。如果网站项目有链接到其他网站的，则应该使用 a 标签来进行跳转。

<template>
  <div>
    <h1>首页</h1>
    <NuxtLink to="/about"> About (Nuxt3应用里的内部链接) </NuxtLink>
    <a href="https://blog.csdn.net/">其他应用里的链接</a>
  </div>
</template>

NuxtLoadingIndicator

该组件用于在页面导航上显示进度条。一般在 Nuxt 3 应用程序中的入口组件app.vue使用。

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator /> <!-- here -->
    <NuxtPage />
  </NuxtLayout>
</template>

NuxtWelcome

Nuxt3项目的欢迎页面组件。

Teleport

将其插槽内容渲染到 DOM 中的另一个位置。