模块
Nuxt 提供了一个模块系统,可以扩展框架的核心功能并简化集成。
探索 Nuxt 模块
在使用 Nuxt 开发生产级应用程序时,你可能会发现框架的核心功能不够用。Nuxt 可以通过配置选项和插件进行扩展,但在多个项目中维护这些自定义配置可能会繁琐、重复且耗时。另一方面,支持每个项目的需求而不需要额外配置将使 Nuxt 变得非常复杂且难以使用。
这就是 Nuxt 提供模块系统的原因之一,该系统使扩展核心功能成为可能。Nuxt 模块是异步函数,在使用 nuxi dev
启动 Nuxt 开发模式或使用 nuxi build
构建项目时会依次运行。它们可以重写模板、配置 webpack 加载器、添加 CSS 库,并执行许多其他有用的任务。
最重要的是,Nuxt 模块可以以 npm 包的形式分发。这使得它们能够在项目之间重用并与社区共享,帮助创建高质量附加组件的生态系统。
添加 Nuxt 模块
一旦安装了模块,你可以在 modules
属性下将它们添加到你的 nuxt.config.ts
文件中。模块开发者通常提供额外的步骤和使用细节。
nuxt.config.ts
export default defineNuxtConfig({
modules: [
// 使用包名(推荐用法)
'@nuxtjs/example',
// 加载本地模块
'./modules/example',
// 添加带有内联选项的模块
['./modules/example', { token: '123' }],
// 内联模块定义
async (inlineOptions, nuxt) => { }
]
})
Nuxt 模块现仅在构建时可用,Nuxt 2 中使用的
buildModules
属性已被弃用,取而代之的是 modules
。创建 Nuxt 模块
每个人都有机会开发模块,我们迫不及待想看看你将会构建什么。