• Nuxt 内部
    • Core
      • Nuxt
      • Renderer
      • ModuleContainer
    • Build
      • Builder
      • Generator
    • Common
      • Utils
      • Options
  • Packaging & Usage
  • Common patterns

    Nuxt 内部

    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默认导出所有类。要导入它们:

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