nuxt logo

文档翻译(非官方)

Nuxt.js
Version:v3.17

模块

Nuxt 提供了一个模块系统,以扩展框架核心并简化集成。

探索 Nuxt 模块

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

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

最重要的是,Nuxt 模块可以在 npm 包中分发。这使得它们可以在项目之间重用并与社区共享,帮助创建一个高质量附加组件的生态系统。

另请参阅 modules

添加 Nuxt 模块

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    // 使用包名(推荐用法)
    '@nuxtjs/example',

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

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

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

Nuxt 模块现在仅限于构建时使用,Nuxt 2 中使用的 buildModules 属性已被弃用,建议使用 modules

创建一个 Nuxt 模块

每个人都有机会开发模块,我们迫不及待地想看看您将构建什么。

另请参阅 模块作者指南