元件

元件是您的 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 如何透過其魔術註解處理具有 Lazy 前綴的元件。請參閱 webpack 文件了解更多資訊
• preload (選用)
  類型: boolean
  這些屬性（prefetch/preload）在生產環境中用於設定 webpack 如何透過其魔術註解處理具有 Lazy 前綴的元件。請參閱 webpack 文件了解更多資訊
• isAsync (選用)
  類型: boolean
  此標誌表示無論是否使用 Lazy 前綴，都應非同步載入元件（使用單獨的區塊）。
• 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)
  帕斯卡命名法的元件名稱。如果未提供，則會從元件名稱產生。
• kebabName (選用)
  類型: kebabCase(options.name)
  烤肉串命名法的元件名稱。如果未提供，則會從元件名稱產生。
• export (選用)
  類型: string
  預設值: 'default'
  指定具名或預設匯出。如果未提供，則會設定為 'default'。
• shortPath (選用)
  類型: string
  元件的簡短路徑。如果未提供，則會從元件路徑產生。
• chunkName (選用)
  類型: string
  預設值: 'components/' + kebabCase(options.name)
  元件的區塊名稱。如果未提供，則會從元件名稱產生。
• prefetch (選用)
  類型: boolean
  這些屬性（prefetch/preload）在生產環境中用於設定 webpack 如何透過其魔術註解處理具有 Lazy 前綴的元件。請參閱 webpack 文件了解更多資訊
• preload (選用)
  類型: boolean
  這些屬性（prefetch/preload）在生產環境中用於設定 webpack 如何透過其魔術註解處理具有 Lazy 前綴的元件。請參閱 webpack 文件了解更多資訊
• global (選用)
  類型: boolean
  預設值: false
  如果啟用，則註冊元件以使其全域可用。
• island (選用)
  類型: boolean
  如果啟用，則將元件註冊為 island。您可以在 <NuxtIsland/> 元件說明中了解有關 islands 的更多資訊。
• mode (選用)
  類型: 'client' | 'server' | 'all'
  預設值: 'all'
  此選項指示元件是否應在用戶端、伺服器或兩者上渲染。預設情況下，它將在用戶端和伺服器上渲染。
• priority (選用)
  類型: number
  預設值: 1
  元件的優先順序，如果多個元件具有相同的名稱，則將使用優先順序最高的元件。