NuxtJS项目——模块

  一、模块

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

猜你喜欢

转载自www.cnblogs.com/bien94/p/12591014.html
今日推荐