Nuxt.js 模块介绍

发布时间：2023-04-14 13:09:53 所属栏目：教程来源：

导读：模块是Nuxt.js扩展，可以扩展其核心功能并添加无限的集成。

在使用Nuxt开发应用程序时，您很快就会发现框架的核心功能还不够。 Nuxt可以使用配置选项和插件进行扩展，但是在多个项目中维护这些自定义是繁琐、重复

模块是Nuxt.js扩展，可以扩展其核心功能并添加无限的集成。

在使用Nuxt开发应用程序时，您很快就会发现框架的核心功能还不够。 Nuxt可以使用配置选项和插件进行扩展，但是在多个项目中维护这些自定义是繁琐、重复和耗时的。另一方面，开箱即用支持每个项目的需求将使Nuxt非常复杂且难以使用。

这就是Nuxt提供更高阶模块系统的原因，可以轻松扩展核心。模块只是在引导Nuxt时按顺序调用的函数。框架在加载之前等待每个模块完成。如此，模块几乎可以自定义Nuxt的任何地方。我们可以使用功能强大的 Hookable Nuxt.js系统来完成特定事件的任务。

最重要的是, Nuxt模块可以合并到npm包中。这使得它们易于跨项目开发重用并与Nuxt社区共享, 我们可以创建一个高质量的Nuxt附加组件生态系统。

如果你：

是优秀团队的成员，需要快速引导新项目。

厌倦了为集成Google Analytics等常见任务重新造轮子。

是一个优秀的开源爱好者，希望轻松与社区分享您的工作。

是一家重视质量和可重用性的企业公司的成员。

通常是在短期限内完成，没有时间深入了解每个新库或集成的细节。

Nuxt.js 团队提供官方模块:

@nuxt/http: 基于ky-universal的轻量级和通用的HTTP请求

@nuxtjs/axios: 安全和使用简单Axios与Nuxt.js集成用来请求HTTP

@nuxtjs/pwa: 使用经过严格测试，更新且稳定的PWA解决方案来增强Nuxt

@nuxtjs/auth: Nuxt.js的身份验证模块，提供不同的方案和验证策略

基本模块

如上所述，模块只是简单的功能。它们可以打包为npm模块或直接包含在项目源代码中。

modules/simple.js

export default function SimpleModule (moduleOptions) {
// Write your code here
}

// required if publishing as an npm package
// module.exports.Meta = require('./package.json')
moduleOptions

这是用户使用modules数组传递对象，我们可以使用它来定制它的行为。

this.options

您可以使用此属性直接访问Nuxt选项。这是nuxt.config.js，其中包含所有默认选项，可用于模块之间的共享选项。

this.nuxt

这是对当前Nuxt实例的引用。请参考 Nuxt class docs for available methods.

this

modules中的context, 请参考 ModuleContainer 来查看可用的方法。

module.exports.Meta

如果要将模块发布为npm包，则需要配置此选项。Nuxt内部使用Meta来更好地处理您的包。

nuxt.config.js

export default {
modules: [
// Simple usage
'~/modules/simple'

// Passing options
['~/modules/simple', { token: '123' }]
]
}
然后，我们告诉Nuxt为项目加载一些特定模块，并将可选参数作为选项。

异步模块

并非所有模块都会同步完成所有操作，例如：您可能希望开发一个需要获取某些API或执行异步IO的模块。为此，Nuxt支持在异步模块中返回Promise或调用回调。

使用 async/await
请注意，仅在Node.js > 7.2中支持使用async / await。因此，如果您是模块开发人员，至少要警告用户使用它们时Node.js版本不能低于7.2。对于大量异步模块或更好的传统支持，您可以使用bundler将其转换为兼容较旧的Node.js版本或Promise方法。

import fse from 'fs-extra'

export default async function asyncModule () {
// You can do async works here using `async`/`await`
const pages = await fse.readJson('./pages.json')
}
返回 Promise
import axios from 'axios'

export default function asyncModule () {
return axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => res.data.map(user => '/users/' + user.username))
.then((routes) => {
// Do something by extending Nuxt routes
})
}
使用回调
import axios from 'axios'

export default function asyncModule (callback) {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => res.data.map(user => '/users/' + user.username))
.then((routes) => {
callback()
})
}
常见模块

下面介绍Nuxt.js常见模块的使用方法，方便你更好的了解关于Nuxt.js模块的使用。

优先级最高选项

有时在nuxt.config.js中注册模块时可以使用顶级选项更方便，这允许我们组合多个选项源。

nuxt.config.js

export default {
modules: [
['@nuxtjs/axios', { anotherOption: true }]
],

// axios module is aware of this by using `this.options.axios`
axios: {
option1,
option2
}
}
module.js

export default function (moduleOptions) {
const options = Object.assign({}, this.options.axios, moduleOptions)
// ...
}
提供插件

通常，模块在添加时需提供一个或多个插件。例如：bootstrap-vue 模块需要将自己注册到Vue中。为此我们可以使用 this.addplugin 方法。

plugin.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

Vue.use(BootstrapVue)
module.js

import path from 'path'

export default function nuxtBootstrapVue (moduleOptions) {
// Register `plugin.js` template
this.addplugin(path.resolve(__dirname, 'plugin.js'))
}
模板插件

已注册的模板和插件可以利用lodash templates模板有条件地更改已注册插件的输出。

plugin.js

// Set Google Analytics UA
ga('create', '<%= options.ua %>', 'auto')

<% if (options.debug) { %>
// Dev only code
<% } %>
module.js

import path from 'path'

export default function nuxtBootstrapVue (moduleOptions) {
// Register `plugin.js` template
this.addplugin({
src: path.resolve(__dirname, 'plugin.js'),
options: {
// Nuxt will replace `options.ua` with `123` when copying plugin to project
ua: 123,

// conditional parts with dev will be stripped from plugin code on production builds
debug: this.options.dev
}
})
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!