API: Nuxt Modules Intro

Nuxt 内部

Nuxt.js 具有完全模块化的架构,允许开发人员使用灵活的 API 扩展 Nuxt Core 的任何部分。

如果有兴趣开发自己的模块,请查看 Modules 教程 获取更多详细信息。

本节有助于熟悉 Nuxt 内部,并可以作为参考,在编写自己的模块时更好地理解它。

Core

这些类是 Nuxt 的核心,应该在运行时和构建时都存在。

Nuxt

Renderer

ModuleContainer

Build

这些类仅用于构建或开发模式。

Builder

Generator

Common

Utils

Options

Packaging & Usage

Nuxt 默认导出所有类。要导入它们:

  1. import { Nuxt, Builder, Utils } from 'nuxt'

Common patterns

所有 Nuxt 类都引用了nuxt实例和选项,这样我们总是在类之间有一致的 API 来访问optionsnuxt

  1. class SomeClass {
  2. constructor(nuxt) {
  3. super()
  4. this.nuxt = nuxt
  5. this.options = nuxt.options
  6. }
  7. someFunction() {
  8. // We have access to `this.nuxt` and `this.options`
  9. }
  10. }

类是可插入的,因此他们应该在 main nuxt容器上注册一个插件来注册更多的 hooks。

  1. class FooClass {
  2. constructor(nuxt) {
  3. super()
  4. this.nuxt = nuxt
  5. this.options = nuxt.options
  6. this.nuxt.callHook('foo', this)
  7. }
  8. }

所以我们可以像这样挂载 hook foo模块:

  1. nuxt.hook('foo', foo => {
  2. // ...
  3. })