模块

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

探索 Nuxt 模块

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

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

最棒的是,Nuxt 模块可以作为 npm 包进行分发。这使得它们可以在项目间复用并与社区共享,有助于构建高质量插件的生态系统。

探索 Nuxt 模块

添加 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 模块

每个人都有机会开发模块,我们迫不及待想看到你将打造什么。

Read more in 模块作者指南.