Question

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

自动导入

Nuxt 自动导入辅助函数、可组合项和 Vue API 以在您的应用程序中使用，而无需显式导入它们。 基于目录结构，每个 Nuxt 应用程序还可以为其自己的组件、可组合项和插件使用自动导入。 组件、可组合项或插件可以使用这些函数。

与经典的全局声明相反，Nuxt 保留了类型和 IDE 的完成和提示，并且仅包含生产代码中实际使用的内容。

在文档中，每个未显式导入的函数都由 Nuxt 自动导入，并且可以在您的代码中按原样使用。 您可以在 API 部分找到自动导入的 composables 和 utilities 的参考。

在 服务器目录 中，我们自动导入从 server/utils/ 导出的函数和变量。

您还可以通过配置 nuxt.config 文件的 imports 部分 自动导入从自定义文件夹或第三方包导出的函数。

内置自动导入

来自Nuxt

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

• components/ for Vue components.
• composables/ for Vue composables.
• utils/ for helper functions and other utilities.

显式导入

Nuxt 使用 #imports 别名公开每个自动导入，如果需要，可用于显式导入：

vue

<script setup>
  import { ref, computed } from '#imports'

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

禁用自动导入

如果你想禁用自动导入，你可以在你的 nuxt.config.ts 中将 imports.autoImport 设置为 false。

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

这将完全禁用隐式自动导入，但仍然可以使用 显式导入。

+This will disable auto-imports completely but it's still possible to use explicit imports from #imports.

Auto-imported Components

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

相关阅读：dirs > components

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

nuxt.config.ts

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})