Nuxt3 中文课程《实战全栈开发简书》限时优惠

模块

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: [
    // 使用包名(推荐用法)
    '@nuxtjs/example',

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

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

    // 内联模块定义
    async (inlineOptions, nuxt) => { }
  ]
})
Nuxt 模块现在只在构建时生效,Nuxt 2 中使用的 buildModules 属性已被弃用,推荐使用 modules 属性。

创建一个 Nuxt 模块

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

Read more in 模块作者指南.