Nuxt 內(nèi)部

Nuxt.js具有完全模塊化的架構(gòu)，允許開發(fā)人員使用靈活的API擴展Nuxt Core的任何部分。

如果有興趣開發(fā)自己的模塊，請查看 Modules 教程 獲取更多詳細(xì)信息。

本節(jié)有助于熟悉Nuxt內(nèi)部，并可以作為參考，在編寫自己的模塊時更好地理解它。

Core

這些類是Nuxt的核心，應(yīng)該在運行時和構(gòu)建時都存在。

Nuxt

• Nuxt Class
• 來源: core/nuxt.js

Renderer

• Renderer Class
• 來源: vue-renderer/renderer.js

ModuleContainer

• ModuleContainer Class
• 來源: core/module.js

Build

這些類僅用于構(gòu)建或開發(fā)模式。

Builder

• Builder Class
• 來源: builder/builder.js

Generator

• Generator Class
• 來源: generator/generator.js

Common

Utils

• 來源: utils/src

Options

• 來源: config/options.js

Packaging & Usage

Nuxt默認(rèn)導(dǎo)出所有類。要導(dǎo)入它們：

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`
  }
}

類是可插入的，因此他們應(yīng)該在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) => {
  // ...
})