自動匯入

原始檔
Nuxt Kit 提供了一套實用工具，可幫助您處理自動匯入。這些函式允許您註冊自己的實用工具、可組合項和 Vue API。

Nuxt 自動匯入輔助函式、可組合項和 Vue API，可在您的整個應用程式中使用，而無需顯式匯入它們。根據目錄結構，每個 Nuxt 應用程式還可以為其自己的可組合項和外掛使用自動匯入。

使用 Nuxt Kit，您還可以新增自己的自動匯入。addImports 和 addImportsDir 允許您向 Nuxt 應用程式新增匯入。addImportsSources 允許您將第三方包中列出的匯入新增到 Nuxt 應用程式。

這些實用工具由unimport提供支援，它提供了 Nuxt 中使用的底層自動匯入機制。

這些函式旨在註冊您自己的實用工具、可組合項和 Vue API。對於頁面、元件和外掛，請參閱特定部分：頁面、元件、外掛。
觀看 Vue School 關於自動匯入 Nuxt Kit 實用工具的影片。

addImports

向 Nuxt 應用程式新增匯入。它使您的匯入在 Nuxt 應用程式中可用，而無需手動匯入它們。

使用

import { addImports, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const names = [
      'useStoryblok',
      'useStoryblokApi',
      'useStoryblokBridge',
      'renderRichText',
      'RichTextSchema',
    ]

    names.forEach(name =>
      addImports({ name, as: name, from: '@storyblok/vue' }),
    )
  },
})

型別

function addImports (imports: Import | Import[]): void

引數

imports：一個物件或一個包含以下屬性的物件陣列

屬性型別必需描述
namestringtrue要檢測的匯入名稱。
fromstringtrue要從其中匯入的模組說明符。
prioritynumberfalse匯入的優先順序；如果多個匯入具有相同的名稱，則使用優先順序最高的匯入。
disabledbooleanfalse此匯入是否已停用。
metaRecord<string, any>false匯入的元資料。
型別booleanfalse此匯入是否為純型別匯入。
typeFromstringfalse在生成型別宣告時，將其用作 from 值。
asstringfalse以該名稱匯入。

addImportsDir

從目錄向 Nuxt 應用程式新增匯入。它將自動從目錄匯入所有檔案，並使它們在 Nuxt 應用程式中可用，而無需手動匯入它們。

使用

import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

型別

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

引數

屬性型別必需描述
dirsstring | string[]true一個字串或一個字串陣列，其中包含要從中匯入的目錄的路徑。
options{ prepend?: boolean }false要傳遞給匯入的選項。如果 prepend 設定為 true，則匯入將新增到匯入列表的前面。

addImportsSources

向 Nuxt 應用程式新增列出的匯入。

使用

import { addImportsSources, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect',
      ],
    })
  },
})

型別

function addImportsSources (importSources: ImportSource | ImportSource[]): void

引數

importSources：一個物件或一個包含以下屬性的物件陣列

屬性型別必需描述
fromstringtrue要從其中匯入的模組說明符。
imports (匯入)PresetImport | ImportSource[]true一個物件或一個物件陣列，可以是匯入名稱、匯入物件或匯入源。