NuxtJS项目——模块

Posted 2020-11-27 Bien94

　　一、模块

　　模块是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)，就可以在命令行上执行自定义命令了。