返回介绍

开场白

开始使用

API

配置

部署

其他

API: Nuxt Modules Intro

发布于 2019-12-01 05:33:26 字数 1756 浏览 1019 评论 0 收藏 0

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来访问optionsnuxt

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) => {
  // ...
})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文