模块

探索 Nuxt 模块

当使用 Nuxt 开发生产级应用时，你可能会发现框架的核心功能还不够用。Nuxt 可以通过配置选项和插件进行扩展，但在多个项目中维护这些自定义改动可能很繁琐、重复且耗时。另一方面，开箱即用地支持每个项目的需求又会让 Nuxt 变得非常复杂、难以使用。

这正是 Nuxt 提供模块系统的原因之一，它使得扩展核心成为可能。Nuxt 模块是异步函数，在使用 nuxt dev 在开发模式下启动 Nuxt，或使用 nuxt build 为生产构建项目时，会顺序运行。它们可以覆盖模板、配置 webpack loader、添加 CSS 库，并执行许多其他有用的任务。

最棒的是，Nuxt 模块可以分发为 npm 包。这使得它们能够在多个项目间复用，并与社区共享，从而帮助创建一个高质量附加件的生态系统。

添加 Nuxt 模块

一旦安装了模块，你就可以将它们添加到 nuxt.config.ts 文件的 modules 属性下。模块开发者通常会提供额外的使用步骤和细节。

export default defineNuxtConfig({
  modules: [
    // 使用包名（推荐用法）
    '@nuxtjs/example',

    // 加载一个本地模块
    './modules/example',

    // 带内联选项添加模块
    ['./modules/example', { token: '123' }],

    // 内联模块定义
    async (inlineOptions, nuxt) => { },
  ],
})

禁用模块 v4.3

你可以通过将某个模块的 config 键设为 false 来禁用它。当你想禁用从 layers 继承来的模块时，这尤其有用。

export default defineNuxtConfig({
  // 禁用 `@nuxt/image` 模块
  image: false,
})

创建一个 Nuxt 模块

每个人都有机会开发模块，我们迫不及待想看到你会构建出什么。