模块
Nuxt 提供了一个模块系统来扩展框架核心并简化集成。
探索 Nuxt 模块
在使用 Nuxt 开发生产级应用时,你可能会发现框架的核心功能不足以满足需求。可以通过配置选项和插件来扩展 Nuxt,但在多个项目间维护这些自定义配置可能会很繁琐、重复且耗时。另一方面,如果开箱即用地支持每个项目的需求,会使 Nuxt 变得非常复杂且难以使用。
这也是 Nuxt 提供模块系统的原因之一,它使得扩展核心变得可行。Nuxt 模块是异步函数,在使用 nuxt dev 启动开发模式或使用 nuxt build 为生产构建项目时,会按顺序运行。它们可以覆盖模板、配置 webpack loader、添加 CSS 库,并执行许多其他有用的任务。
最重要的是,Nuxt 模块可以作为 npm 包分发。这使得它们可以在不同项目之间复用并与社区共享,有助于创建一个高质量插件的生态系统。
添加 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 模块
任何人都有机会开发模块,我们期待看到你会构建什么。