透過 100 多個技巧的集合學習 Nuxt!

模組

Nuxt 提供模組系統來擴展框架核心並簡化整合。

探索 Nuxt 模組

當使用 Nuxt 開發生產級應用程式時,您可能會發現框架的核心功能不足。Nuxt 可以透過組態選項和外掛程式擴展,但在多個專案中維護這些自訂設定可能會很繁瑣、重複且耗時。另一方面,開箱即用地支援每個專案的需求會使 Nuxt 非常複雜且難以使用。

這也是 Nuxt 提供模組系統的原因之一,該系統使擴展核心成為可能。Nuxt 模組是異步函式,當使用 nuxi dev 在開發模式下啟動 Nuxt 或使用 nuxi build 為生產環境建置專案時,它們會依序執行。它們可以覆蓋範本、設定 webpack 加載器、新增 CSS 函式庫以及執行許多其他有用的任務。

最棒的是,Nuxt 模組可以發佈在 npm 套件中。這使得它們可以在專案之間重複使用,並與社群分享,有助於建立高品質附加元件的生態系統。

探索 Nuxt 模組

新增 Nuxt 模組

安裝模組後,您可以將它們新增至 nuxt.config.ts 檔案的 modules 屬性下。模組開發人員通常會提供其他步驟和使用細節。

nuxt.config.ts
export default 
defineNuxtConfig
({
modules
: [
// Using package name (recommended usage) '@nuxtjs/example', // Load a local module './modules/example', // Add module with inline-options ['./modules/example', {
token
: '123' }],
// Inline module definition async (
inlineOptions
,
nuxt
) => { }
] })
Nuxt 模組現在僅限於建置時使用,而 Nuxt 2 中使用的 buildModules 屬性已被棄用,改用 modules

建立 Nuxt 模組

每個人都有機會開發模組,我們迫不及待想看看您會建立什麼。

請閱讀模組作者指南以了解更多資訊。