一、模块
模块是Nuxt.js扩展,可以扩展其核心功能并添加无限的集成。模块只是在引导Nuxt时按顺序调用的函数。框架在加载之前等待每个模块完成。
(1)模块几乎可以自定义Nuxt的任何地方。
(2)Nuxt模块可以合并到npm包中。
(3)模块只是简单的功能,它们可以打包为npm
模块或直接包含在项目源代码中。
二、Nuxt.js官方模块
- @nuxt/http: 基于ky-universal的轻量级和通用的HTTP请求
- @nuxtjs/axios: 安全和使用简单Axios与Nuxt.js集成用来请求HTTP
- @nuxtjs/pwa: 使用经过严格测试,更新且稳定的PWA解决方案来增强Nuxt
- @nuxtjs/auth: Nuxt.js的身份验证模块,提供不同的方案和验证策略
三、模块的存放、配置和发布
(1)存放
建议将项目工程自身添加的模块放置在工程源代码目录下的modules目录中。
(2)配置
在nuxt.config.js文件通过modules属性来配置相关模块,支持参数的可配置。
(3)发布
如果要将模块发布为npm包,则需要在模块文件中配置module.exports.meta选项。Nuxt内部使用meta
来更好地处理要发布的包。
四、异步模块
Nuxt支持在异步模块,可以通过下面几种方式来实现:
(1)使用async/await
仅在Node.js > 7.2中支持使用async
/ await。
(2)使用回调函数
(3)返回Promise
五、钩子上运行任务
模块可能只需要在特定条件下执行操作,而不仅仅是在Nuxt初始化期间。我们可以使用强大的Tapable插件来执行特定事件的任务。Nuxt将等待钩子返回Promise
或被定义为async
(异步)。
六、自定义Nuxt命令
从v2.4.0
开始,可以通过Nuxt模块的包(package)添加自定义nuxt命令。为此,必须NuxtCommand
在定义命令时遵循API规则。在命令所在的文件中,注意调用/usr/bin/env
来检索Node可执行文件。另请注意,ES模块语法不能用于命令,除非您手动合并esm
到代码中。接下来,制定命令的设置和行为。若要使命令可以通过Nuxt CLI识别bin
,请使用nuxt-module
约定将其列在package.json
的部分下,该约定module与包名称相关。一旦安装了软件包(通过NPM或Yarn),就可以在命令行上执行自定义命令了。