API: Nuxt Modules Intro

优质

小牛编辑

125浏览

2023-12-01

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

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

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

Core

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

Nuxt

Nuxt Class
来源: core/nuxt.js

Renderer

Renderer Class
来源: vue-renderer/renderer.js

ModuleContainer

ModuleContainer Class
来源: core/module.js

Build

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

Builder

Builder Class
来源: builder/builder.js

Generator

Generator Class
来源: generator/generator.js

Common

Utils

来源: utils/src

Options

来源: config/options.js

Packaging & Usage

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

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

Common patterns

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

class SomeClass {
  constructor (nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options
  }

  someFunction () {
    // We have access to `this.nuxt` and `this.options`
  }
}

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

class FooClass {
  constructor (nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options

    this.nuxt.callHook('foo', this)
  }
}

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

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