模块

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

探索 Nuxt 模块

¥Exploring Nuxt Modules

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

¥When developing production-grade applications with Nuxt you might find that the framework's core functionality is not enough. Nuxt can be extended with configuration options and plugins, but maintaining these customizations across multiple projects can be tedious, repetitive and time-consuming. On the other hand, supporting every project's needs out of the box would make Nuxt very complex and hard to use.

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

¥This is one of the reasons why Nuxt provides a module system that makes it possible to extend the core. Nuxt modules are async functions that sequentially run when starting Nuxt in development mode using nuxi dev or building a project for production with nuxi build. They can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.

最重要的是,Nuxt 模块可以分发到 npm 包中。这使得它们可以在项目之间重复使用并与社区共享,从而帮助创建高质量插件的生态系统。

¥Best of all, Nuxt modules can be distributed in npm packages. This makes it possible for them to be reused across projects and shared with the community, helping create an ecosystem of high-quality add-ons.

:

Read more in Modules.

探索 Nuxt 模块

¥Explore Nuxt Modules

::

添加 Nuxt 模块

¥Add Nuxt Modules

安装模块后,你可以将它们添加到 nuxt.config.ts 文件的 modules 属性下。模块开发者通常会提供额外的使用步骤和细节。

¥Once you have installed the modules you can add them to your nuxt.config.ts file under the modules property. Module developers usually provide additional steps and details for usage.

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 modules are now build-time-only, and the buildModules property used in Nuxt 2 is deprecated in favor of modules.

创建 Nuxt 模块

¥Create a Nuxt Module

每个人都有机会开发模块,我们迫不及待地想看到你的成果。

¥Everyone has the opportunity to develop modules and we cannot wait to see what you will build.

Read more in Module Author Guide.