Learn Nuxt with a Collection of 100+ Tips!

Nuxt 模块

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 模块作者指南.