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),就可以在命令行上執行自定義命令了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM