使用 Vue & UI Pro 的仪表板模板

自动导入

Nuxt 自动导入组件、可组合函数、辅助函数和 Vue API。

Nuxt 自动导入组件、可组合函数和 Vue.js API,以便在您的应用程序中使用它们,而无需显式导入。

app.vue
<script setup lang="ts">
const 
count
=
ref
(1) // ref is auto-imported
</script>

得益于其意见领袖式的目录结构,Nuxt 可以自动导入您的 components/composables/utils/

与传统的全局声明不同,Nuxt 保留了类型推断、IDE 代码补全和提示,并且 **仅包含生产代码中使用的部分**。

在文档中,每个未显式导入的函数都会由 Nuxt 自动导入,并可以在您的代码中直接使用。您可以在 API 部分 中找到自动导入的组件、可组合函数和实用程序的参考。
server 目录中,Nuxt 自动导入从 server/utils/ 导出的函数和变量。
您还可以通过配置 imports 部分来自动导入从自定义文件夹或第三方包导出的函数 nuxt.config 文件。

内置自动导入

Nuxt 自动导入函数和可组合函数来执行 数据获取,访问 应用程序上下文运行时配置,管理 状态 或定义组件和插件。

<script setup lang="ts">
/* useAsyncData() and $fetch() are auto-imported */
const { 
data
,
refresh
,
pending
} = await
useFetch
('/api/hello')
</script>

Vue 3 公开了诸如 refcomputed 之类的响应式 API,以及由 Nuxt 自动导入的生命周期钩子和辅助函数。

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const 
count
=
ref
(1)
const
double
=
computed
(() =>
count
.
value
* 2)
</script>

Vue 和 Nuxt 可组合函数

当您使用 Vue 和 Nuxt 提供的内置 Composition API 可组合函数时,请注意,其中许多函数依赖于在正确的 *上下文* 中调用。

在组件生命周期中,Vue 通过全局变量跟踪当前组件的临时实例(类似地,Nuxt 跟踪 nuxtApp 的临时实例),然后在同一 tick 中取消设置它。这在服务器渲染时至关重要,既可以避免跨请求状态污染(在两个用户之间泄漏共享引用),也可以避免不同组件之间的泄漏。

这意味着(除了极少数例外)您不能在 Nuxt 插件、Nuxt 路由中间件或 Vue 设置函数之外使用它们。最重要的是,您必须同步使用它们 - 也就是说,您不能在调用可组合函数之前使用 await,除非在 <script setup> 块中,在使用 defineNuxtComponent 声明的组件的设置函数中,在 defineNuxtPlugin 中或在 defineNuxtRouteMiddleware 中,我们执行转换以在 await 之后保持同步上下文。

如果您遇到类似 Nuxt 实例不可用 的错误消息,则可能意味着您在 Vue 或 Nuxt 生命周期中的错误位置调用了 Nuxt 可组合函数。

查看 asyncContext 实验性功能,以便在异步函数中使用 Nuxt 可组合函数。
查看此 GitHub 评论中的完整解释。

错误代码示例

composables/example.ts
// trying to access runtime config outside a composable
const 
config
=
useRuntimeConfig
()
export const
useMyComposable
= () => {
// accessing runtime config here }

正常代码示例

composables/example.ts
export const 
useMyComposable
= () => {
// Because your composable is called in the right place in the lifecycle, // useRuntimeConfig will work here const
config
=
useRuntimeConfig
()
// ... }

基于目录的自动导入

Nuxt 直接自动导入在定义目录中创建的文件

文档 > 示例 > 功能 > 自动导入 中阅读和编辑实时示例。

显式导入

Nuxt 使用 #imports 别名公开每个自动导入,如果需要,可以使用它来进行显式导入

<script setup lang="ts">
import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

禁用自动导入

如果您想禁用自动导入可组合函数和实用程序,可以在 nuxt.config 文件中将 imports.autoImport 设置为 false

nuxt.config.ts
export default 
defineNuxtConfig
({
imports
: {
autoImport
: false
} })

这将完全禁用自动导入,但仍然可以使用 显式导入#imports 中导入。

自动导入组件

Nuxt 也会自动从你的 ~/components 目录导入组件,尽管这与自动导入组合函数和实用函数的配置是分开的。

文档 > 指南 > 目录结构 > 组件 中了解更多。

要禁用从你自己的 ~/components 目录自动导入组件,你可以将 components.dirs 设置为一个空数组(但请注意,这不会影响模块添加的组件)。

nuxt.config.ts
export default 
defineNuxtConfig
({
components
: {
dirs
: []
} })

从第三方包自动导入

Nuxt 还允许从第三方包自动导入。

如果你正在使用该包的 Nuxt 模块,该模块很可能已经为该包配置了自动导入。

例如,你可以像这样启用从 vue-i18n 包自动导入 useI18n 组合函数

nuxt.config.ts
export default 
defineNuxtConfig
({
imports
: {
presets
: [
{
from
: 'vue-i18n',
imports
: ['useI18n']
} ] } })