組件

組件是 Nuxt 應用程式的建構區塊。它們是可以重複使用的 Vue 實例，可用於建立使用者介面。在 Nuxt 中，預設會自動匯入來自 components 目錄的組件。然而，如果您需要從其他目錄匯入組件，或希望根據需要選擇性地匯入它們，@nuxt/kit 提供了 addComponentsDir 和 addComponent 方法。這些工具讓您可以自訂組件配置，以更好地滿足您的需求。

addComponentsDir

註冊要掃描組件的目錄，並僅在使用時匯入。請注意，除非您指定 global: true 選項，否則這不會全域註冊組件。

類型

async function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

interface ComponentsDir {
  path: string
  pattern?: string | string[]
  ignore?: string[]
  prefix?: string
  pathPrefix?: boolean
  enabled?: boolean
  prefetch?: boolean
  preload?: boolean
  isAsync?: boolean
  extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
  global?: boolean
  island?: boolean
  watch?: boolean
  extensions?: string[]
  transpile?: 'auto' | boolean
}

// You can augment this interface (exported from `@nuxt/schema`) if needed
interface ComponentMeta {
  [key: string]: unknown
}

interface Component {
  pascalName: string
  kebabName: string
  export: string
  filePath: string
  shortPath: string
  chunkName: string
  prefetch: boolean
  preload: boolean
  global?: boolean
  island?: boolean
  mode?: 'client' | 'server' | 'all'
  priority?: number
  meta?: ComponentMeta
}

參數

dir

類型：ComponentsDir

必填：true

具有以下屬性的物件

• path (必填)
  類型：string
  組件目錄的路徑（絕對或相對路徑）。您可以使用 Nuxt 別名（~ 或 @）來參照專案內的目錄，或直接使用類似於 require 的 npm 套件路徑。
• pattern (選填)
  類型：string | string[]
  接受將針對指定路徑運行的模式。
• ignore (選填)
  類型：string[]
  忽略將針對指定路徑運行的模式。
• prefix (選填)
  類型：string
  以此字串為所有符合的組件加上前綴。
• pathPrefix (選填)
  類型：boolean
  以其路徑為組件名稱加上前綴。
• enabled (選填)
  類型：boolean
  如果設定為 true，則忽略掃描此目錄。
• prefetch (選填)
  類型：boolean
  這些屬性 (prefetch/preload) 在生產環境中用於配置 webpack 如何透過其 magic comments 處理具有 Lazy 前綴的組件。請參閱 webpack 文件 以了解更多資訊。
• preload (選填)
  類型：boolean
  這些屬性 (prefetch/preload) 在生產環境中用於配置 webpack 如何透過其 magic comments 處理具有 Lazy 前綴的組件。請參閱 webpack 文件 以了解更多資訊。
• isAsync (選填)
  類型：boolean
  此標誌表示，無論是否使用 Lazy 前綴，都應異步載入組件（使用單獨的 chunk）。
• extendComponent (選填)
  類型：(component: Component) => Promise<Component | void> | (Component | void)
  一個函數，將針對在目錄中找到的每個組件呼叫。它接受一個組件物件，並應傳回一個組件物件或一個解析為組件物件的 Promise。
• global (選填)
  類型：boolean
  預設值：false
  如果啟用，則註冊組件以使其全域可用。
• island (選填)
  類型：boolean
  如果啟用，則將組件註冊為 islands。
• watch (選填)
  類型：boolean
  監看指定路徑的變更，包括檔案新增和檔案刪除。
• extensions (選填)
  類型：string[]
  Nuxt 建構器支援的擴展名。
• transpile (選填)
  類型：'auto' | boolean
  使用 build.transpile 轉換指定的路徑。如果設定為 'auto'，則如果路徑中包含 node_modules/，則會將 transpile 設定為 true。

opts

必填：false

• prepend (選填)
  類型：boolean
  如果設定為 true，則會使用 unshift() 而不是 push() 將目錄添加到陣列的最前面。

addComponent

註冊要自動匯入的組件。

類型

async function addComponent (options: AddComponentOptions): void

interface AddComponentOptions {
  name: string,
  filePath: string,
  pascalName?: string,
  kebabName?: string,
  export?: string,
  shortPath?: string,
  chunkName?: string,
  prefetch?: boolean,
  preload?: boolean,
  global?: boolean,
  island?: boolean,
  mode?: 'client' | 'server' | 'all',
  priority?: number,
}

參數

options

類型：AddComponentOptions

必填：true

具有以下屬性的物件

• name (必填)
  類型：string
  組件名稱。
• filePath (必填)
  類型：string
  組件的路徑。
• pascalName (選填)
  類型：pascalCase(options.name)
  Pascal case 組件名稱。如果未提供，將會從組件名稱產生。
• kebabName (選填)
  類型：kebabCase(options.name)
  Kebab case 組件名稱。如果未提供，將會從組件名稱產生。
• export (選填)
  類型：string
  預設值：'default'
  指定具名或預設匯出。如果未提供，則會設定為 'default'。
• shortPath (選填)
  類型：string
  組件的短路徑。如果未提供，將會從組件路徑產生。
• chunkName (選填)
  類型：string
  預設值：'components/' + kebabCase(options.name)
  組件的 chunk 名稱。如果未提供，將會從組件名稱產生。
• prefetch (選填)
  類型：boolean
  這些屬性 (prefetch/preload) 在生產環境中用於配置 webpack 如何透過其 magic comments 處理具有 Lazy 前綴的組件。請參閱 webpack 文件 以了解更多資訊。
• preload (選填)
  類型：boolean
  這些屬性 (prefetch/preload) 在生產環境中用於配置 webpack 如何透過其 magic comments 處理具有 Lazy 前綴的組件。請參閱 webpack 文件 以了解更多資訊。
• global (選填)
  類型：boolean
  預設值：false
  如果啟用，則註冊組件以使其全域可用。
• island (選填)
  類型：boolean
  如果啟用，則將組件註冊為 island。您可以在 <NuxtIsland/> 組件說明中閱讀有關 islands 的更多資訊。
• mode (選填)
  類型：'client' | 'server' | 'all'
  預設值：'all'
  此選項指示組件應在客戶端、伺服器端或兩者上呈現。預設情況下，它將在客戶端和伺服器端都呈現。
• priority (選填)
  類型：number
  預設值：1
  組件的優先順序，如果多個組件具有相同的名稱，則將使用優先順序最高的組件。