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. })