简言
在Nuxt3中，components文件夹和vue文件夹用处一样，都是放置vue公共组件的地方。只不过由于Nuxt3中components文件内的组件自动导入机制，用法些许不同。
components
components/ 目录是你放置所有 Vue 组件的地方。
Nuxt 会自动导入该目录中的所有组件（以及您可能使用的任何模块注册的组件）。
假如目录：
| components/
--| AppHeader.vue
--| AppFooter.vue
则可以这样使用，默认不需要导入:
<template>
<div>
<AppHeader />
<NuxtPage />
<AppFooter />
</div>
</template>
组件名称
自动导入的组件默认名称为：它自身名到compontes的路径名 + 文件名，且重复的部分将被删除。
例如：
那么 ：
如果你不想带路径,仅根据组件名称怎么办？可以在nuxt.config.ts配置文件配置：
export default defineNuxtConfig({
components: [
{
path: '~/components',
+ pathPrefix: false,
},
],
});
动态组件
现在nuxt3不是有自动导入机制嘛，你没导入组件怎么使用动态组件嘞？
很简单：
- 从#components导入即可
- 使用resolveComponent(str)vue的辅助函数，按名称手动解析已注册的组件，为了能从正确的组件上下文进行解析，resolveComponent() 必须在setup() 或渲染函数内调用。
延迟加载
要动态导入组件（也称为延迟加载组件），您只需将 Lazy 前缀添加到组件的名称中。如果组件不总是需要，这特别有用。
通过使用 Lazy 前缀和v-if搭配，您可以将组件代码的加载延迟到正确的时机，这有助于优化 JavaScript 包的大小。
这是因为nuxt3看到组件名前面有Lazy，所以按vue3懒加载组件执行。所以创建组件时名称前避免带Lazy字符串。
<LazyTabBaseTab />
客户端组件和服务器组件
如果一个组件只在客户端渲染，您可以在组件名后添加 .client 后缀。例如：
| components/
--| Comments.client.vue
此功能仅适用于 Nuxt 的自动导入和 #components 导入。从实际路径显式导入这些组件不会将它们转换为仅客户端组件。
.client 组件仅在挂载后才会渲染。要在 onMounted() 的回调中访问渲染的模板，请在 onMounted() 钩子的回调中添加 await nextTick()。
服务器端组件允许在客户端应用程序中进行单独组件的服务器渲染。即使您正在生成静态站点，也可以在 Nuxt 中使用服务器端组件。这使得可以构建复杂的站点，混合动态组件、服务器渲染的 HTML 甚至静态标记的块。
**即使在服务器端渲染上，服务器端组件也可以单独使用或与客户端组件配对使用。**例如.server + .client 组件是组件的两个“半部分”，可以在服务器端和客户端分别使用高级用例来分别实现组件。
| components/
--| Comments.client.vue
--| Comments.server.vue
<template>
<div>
<!-- 这个组件将在服务器端渲染 Comments.server，然后在浏览器中挂载后渲染 Comments.client -->
<Comments />
</div>
</template>
自定义扩展自动导入组件目录
默认情况下，只会扫描 ~/components 目录。如果您想添加其他目录，或更改在该目录的子文件夹中如何扫描组件，您可以将其他目录添加到配置中：
export default defineNuxtConfig({
components: [
// ~/calendar-module/components/event/Update.vue => <EventUpdate />
{ path: '~/calendar-module/components' },
// ~/user-module/components/account/UserDeleteDialog.vue => <UserDeleteDialog />
{ path: '~/user-module/components', pathPrefix: false },
// ~/components/special-components/Btn.vue => <SpecialBtn />
{ path: '~/components/special-components', prefix: 'Special' },
// 如果您想要覆盖 `~/components` 的子目录，请确保它是最后一个。
//
// ~/components/Btn.vue => <Btn />
// ~/components/base/Btn.vue => <BaseBtn />
'~/components'
]
})
使用库的组件
使用自动摇树和组件注册创建 Vue 组件库非常简单 ✨
您可以使用 components:dirs 钩子来扩展目录列表，而无需在您的 Nuxt 模块中要求用户配置。
假设有以下目录结构：
| node_modules/
---| awesome-ui/
------| components/
---------| Alert.vue
---------| Button.vue
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js
然后在 awesome-ui/nuxt.js 中，您可以使用 components:dirs 钩子：
import { defineNuxtModule, createResolver } from '@nuxt/kit'
export default defineNuxtModule({
hooks: {
'components:dirs': (dirs) => {
const { resolve } = createResolver(import.meta.url)
// 将 ./components 目录添加到列表中
dirs.push({
path: resolve('./components'),
prefix: 'awesome'
})
}
}
})
就是这样！现在在您的项目中，您可以将您的 UI 库作为 Nuxt 模块在 nuxt.config 文件中导入：
export default defineNuxtConfig({
modules: ['awesome-ui/nuxt']
})
… 并在我们的 pages/index.vue 中直接使用模块组件（以 awesome- 为前缀）：
<template>
<div>
我的 <AwesomeButton>UI 按钮</AwesomeButton>！
<awesome-alert>这是一个提示！</awesome-alert>
</div>
</template>
它将仅在使用时自动导入组件，并在 node_modules/awesome-ui/components/ 中更新组件时支持 HMR。文章来源：https://www.toymoban.com/news/detail-803008.html
结语
本篇主要将了nuxt3自导导入下的components文件夹如何使用。
你可以和向往常一样自己导入然后使用。文章来源地址https://www.toymoban.com/news/detail-803008.html
到了这里，关于【Nuxt3】目录中components文件夹的用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
