Nuxt 內(nèi)部

Nuxt 內(nèi)部

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

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

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

Core

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

Nuxt

• Nuxt Class
• 來(lái)源: core/nuxt.js

Renderer

• Renderer Class
• 來(lái)源: vue-renderer/renderer.js

ModuleContainer

• ModuleContainer Class
• 來(lái)源: core/module.js

Build

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

Builder

• Builder Class
• 來(lái)源: builder/builder.js

Generator

• Generator Class
• 來(lái)源: generator/generator.js

Common

Utils

• 來(lái)源: utils/src

Options

• 來(lái)源: config/options.js

Packaging & Usage

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

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

Common patterns

所有Nuxt類都引用了nuxt實(shí)例和選項(xiàng)，這樣我們總是在類之間有一致的API來(lái)訪問(wèn)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容器上注冊(cè)一個(gè)插件來(lái)注冊(cè)更多的hooks。

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

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

所以我們可以像這樣掛載hook foo模塊：

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