Nuxt3 的生命周期和鉤子函數（六）

来源:https://www.cnblogs.com/Amd794/p/18276500
-Advertisement-
Play Games

摘要：本文深入解析了Nuxt3框架中的多個核心生命周期鉤子和組件註冊功能，包括imports:sources、imports:extend、imports:context、imports:dirs、components:dirs及components:extend，通過實例代碼指導開發者如何在不同場... ...


title: Nuxt3 的生命周期和鉤子函數（六）
date: 2024/6/30
updated: 2024/6/30
author: cmdragon

excerpt:
摘要：本文深入解析了Nuxt3框架中的多個核心生命周期鉤子和組件註冊功能，包括imports:sources、imports:extend、imports:context、imports:dirs、components:dirs及components:extend，通過實例代碼指導開發者如何在不同場景下有效運用這些鉤子函數來擴展導入源、優化組件導入流程及增強項目結構靈活性。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 生命周期
  • 鉤子函數
  • 模塊導入
  • 全局組件
  • 導入源
  • 目錄擴展

image

image

掃碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長

imports:sources

參數

  • presets

描述

imports:sources 是 Nuxt 3 提供的一個鉤子函數，在 Nuxt 應用的設置過程中被調用。它允許模塊擴展導入源，使得模塊可以添加自定義的導入路徑，這些路徑下的組件、工具函數等可以在 Nuxt 應用中全局導入。presets 參數是一個數組，包含了預定義的導入源配置集合，模塊可以通過這個參數來添加或修改導入源。

詳細用法解釋和完整demo示例

以下是如何在 Nuxt 3 插件中使用 imports:sources 鉤子的詳細解釋和完整示例：

步驟 1: 創建插件文件

在 Nuxt 3 項目的 plugins 目錄下創建一個新的插件文件，例如 custom-imports.js。

步驟 2: 編寫插件代碼

在 custom-imports.js 文件中，使用 defineNuxtPlugin 函數定義插件，併在插件中使用 imports:sources 鉤子：

// plugins/custom-imports.js
import { defineNuxtPlugin } from '#app';
import path from 'path';

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 imports:sources 鉤子擴展導入源
  nuxtApp.hook('imports:sources', (presets) => {
    // 定義一個新的預設配置
    const customPreset = {
      name: 'customPreset',
      sources: [
        {
          find: /^@custom/, // 當導入路徑以 @custom 開頭時
          path: path.resolve(__dirname, '../composables'), // 指向 composable 目錄的絕對路徑
        },
      ],
    };

    // 將自定義的預設配置添加到預設數組中
    presets.push(customPreset);
  });
});

步驟 3: 註冊插件

在 nuxt.config.ts 或 nuxt.config.js 文件中註冊這個插件：

// nuxt.config.ts 或 nuxt.config.js
export default defineNuxtConfig({
  // ...
  plugins: [
    // ...
    './plugins/custom-imports',
  ],
  // ...
});

完整demo示例

以下是一個完整的示例，展示瞭如何在 Nuxt 3 應用中使用 imports:sources 鉤子來添加自定義導入源預設：

// plugins/custom-imports.js
import { defineNuxtPlugin } from '#app';
import path from 'path';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('imports:sources', (presets) => {
    // 定義一個新的預設配置
    const customPreset = {
      name: 'customPreset',
      sources: [
        {
          find: /^@custom/,
          path: path.resolve(__dirname, '../composables'),
        },
      ],
    };

    // 將自定義的預設配置添加到預設數組中
    presets.push(customPreset);
  });
});

// nuxt.config.ts 或 nuxt.config.js
export default defineNuxtConfig({
  plugins: [
    './plugins/custom-imports',
  ],
});

現在，你可以在 Nuxt 應用中的任何組件或頁面中通過 @custom/xxx 的方式導入 composables 目錄下的內容，前提是在你的代碼中已經定義了相應的 @custom 別名。

imports:extend

參數

  • imports: 這是一個對象，包含了所有在 Nuxt 應用中全局可用的導入。

詳細描述

imports:extend 鉤子是 Nuxt.js 提供的一個擴展機制，它允許插件或模塊向 Nuxt 應用的全局範圍內添加額外的導入。這意味著，你可以在任何組件、頁面或 Nuxt 插件中訪問這些導入，而不需要重覆導入它們。

當 Nuxt 應用啟動時，Nuxt 會自動調用 imports:extend 鉤子，並且傳遞一個包含當前全局導入的對象給這個鉤子。插件或模塊可以修改這個對象，添加新的屬性，從而使得新的導入在整個應用中可用。

使用場景

這個鉤子特別有用，當你想要：

  • 在全局範圍內添加自定義函數或方法。
  • 將第三方庫或模塊註冊為全局變數，以便在應用的任何部分都可以方便地使用。
  • 為 Nuxt 應用提供全局的輔助函數或工具。

Demo

以下是如何在插件中使用 imports:extend 鉤子的詳細示例：

// plugins/my-plugin.js

// 導出一個預設的 Nuxt 插件定義
export default defineNuxtPlugin((nuxtApp) => {
  // 在插件內部，使用 imports:extend 鉤子來擴展全局導入
  nuxtApp.hook('imports:extend', (imports) => {
    // 添加自定義函數到 imports 對象
    imports.myCustomFunction = function() {
      console.log('This is a custom function imported globally.');
    };

    // 添加一個第三方庫到 imports 對象
    // 假設我們有一個第三方庫 'some-lib'，我們需要將其導出
    const someLib = require('some-lib');
    imports.someLib = someLib;

    // 如果需要，還可以添加模塊
    // 假設我們有一個自定義模塊 'myCustomModule'
    const myCustomModule = require('./path/to/myCustomModule');
    imports.myCustomModule = myCustomModule;
  });
});

// 現在，在任何組件或頁面中，我們可以直接使用這些導入
// 例如，在頁面中使用 myCustomFunction
export default {
  methods: {
    greet() {
      this.myCustomFunction(); // 輸出: This is a custom function imported globally.
    }
  }
};

在這個例子中，我們定義了一個插件 my-plugin.js，它通過 imports:extend 鉤子向 Nuxt 應用的全局導入中添加了一個自定義函數 myCustomFunction 和一個第三方庫 someLib，以及一個自定義模塊 myCustomModule。之後，在應用的任何組件或頁面中，我們都可以直接使用這些全局導入，而不需要單獨導入它們。

通過這種方式，imports:extend 鉤子極大地簡化了在 Nuxt 應用中共用和重用代碼的過程。

imports:context

參數

  • context：這是一個對象，包含了創建 unimport 上下文時的相關信息。

詳細描述

imports:context 鉤子在創建 unimport 上下文時被調用。這個鉤子提供了一個機會，讓插件或模塊能夠訪問和修改 unimport 上下文。通過這個鉤子，你可以對模塊的導入和卸載進行更精細的控制。

具體來說，context 對象包含了以下重要信息：

  • imports：一個數組，用於存儲要導入的模塊路徑。
  • unimports：一個數組，用於存儲要卸載的模塊路徑。

你可以在鉤子函數中根據具體的需求，對 imports 和 unimports 數組進行操作，例如：

  • 添加或移除模塊路徑。
  • 根據條件動態地決定是否導入或卸載特定模塊。

這樣，你可以根據應用的不同狀態或用戶的操作，靈活地管理模塊的導入和卸載，以優化性能、減少不必要的資源載入或實現特定的功能。

Demo

以下是一個更詳細的示例，展示如何在插件中使用 imports:context 鉤子：

// plugins/my-plugin.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 imports:context 鉤子
  nuxtApp.hook('imports:context', (context) => {
    // 在這裡可以訪問和修改 context 對象

    // 假設我們有一個功能模塊，只在特定頁面需要
    if (nuxtApp.route.path === '/specific-page') {
      context.imports.push('path/to/featureModule');
    }

    // 監聽路由變化事件，根據需要動態添加或移除模塊
    nuxtApp.$router.afterEach((to, from) => {
      if (to.path === '/another-specific-page') {
        context.imports.push('path/to/anotherModule');
      } else {
        context.unimports.push('path/to/anotherModule');
      }
    });
  });
});

在這個示例中，我們根據當前路由路徑來決定是否導入特定的功能模塊。如果當前頁面是 /specific-page，則將 featureModule 添加到導入列表中。同時，我們還監聽了路由變化事件，根據新的路由路徑動態地添加或移除模塊。

這樣，通過使用 imports:context 鉤子，我們可以根據應用的具體情況，靈活地控制模塊的導入和卸載，以實現更好的性能和用戶體驗。

imports:dirs

參數

  • dirs：一個字元串數組，用於指定額外的導入目錄。

詳細描述

imports:dirs 鉤子允許你擴展 Nuxt 項目的導入目錄。這意味著你可以指定額外的目錄，使得這些目錄中的模塊可以被 Nuxt 項目導入和使用。這對於組織代碼、分離關註點或重用代碼片段非常有用。

當你在 Nuxt 應用中使用 import 或 require 語句時，Nuxt 會首先在預設的導入目錄中查找模塊。通過使用 imports:dirs 鉤子，你可以添加自定義的目錄到搜索路徑中，使得這些目錄中的模塊也可以被導入。

components:dirs

components:extend

餘下文章內容請點擊跳轉至 個人博客頁面 或者 掃碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt3 的生命周期和鉤子函數（六） | cmdragon's Blog

往期文章歸檔：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 手機護眼概論及OLED屏幕降低頻閃原理介紹
    影響護眼的因素 藍光 目前手機大多已經實現硬體低藍光，而且藍光也可以通過護眼模式輕易剋服。 偏振光 偏振光指振動方向與傳播方向不對稱的光，主要分為圓偏振光與線偏振光兩種。 線偏振光測試方法為：透過偏振片看屏幕，旋轉偏振片，若存在某個角度屏幕發出的光線無法透過偏振片，則是線偏振光。一些墨鏡鏡片、相機的 ...
  • JXCategoryView的使用總結
    一、初始化 -(JXCategoryTitleView *)categoryView{ if (!_categoryView) { _categoryView = [[JXCategoryTitleView alloc] init]; _categoryView.delegate = self; _ ...
  • Nuxt3 的生命周期和鉤子函數（七）
    摘要：文章闡述了Nuxt3中Nitro生命周期鉤子的使用，如nitro:config自定義配置、nitro:init註冊構建鉤子、nitro:build:before/after調整構建設置及處理公共資產、prerender:routes擴展預渲染路由、build:error捕獲構建錯誤，通過示例代... ...
  • 前端如何用密文跟後端互通？原來那麼簡單！
    ‍ 寫在開頭 點贊 + 收藏 學會 後端：密碼得走密文哇！ 我：base64？md5？ 後端:這次不行哇，新來的測試不好糊弄呢！必須要國密sm2加密捏 我: 好吧，看我的。 我這邊使用的是sm-crypto，當然也有很多優秀的庫如：forge,我在業務上搭配jszip做過上傳zi ...
  • 【動畫進階】類 ChatGpt 多行文本打字效果
    今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣： 這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。 也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果： 單行文本打字效果 在此 ...
  • 將File對象轉換為URL
    ★ 將File對象轉換為URL的兩種方式 方式一. URL.createObjectURL(object) 返回了一個DOMString包含了一個對象URL，該URL可用於指定源 object的內容。其參數為用於創建 URL 的File 對象、Blob 對象或者 MediaSource 對象。​ 方 ...
  • [JS] 數據類型與特殊值的判斷方法
    JavaScript 是一種弱類型語言，開發者經常需要判斷變數的數據類型。本文介紹了 typeof、instanceof、Object.prototype.toString.call 等常用的判斷方法，並討論了 typeof null 返回 object 的歷史原因。此外，還涵蓋瞭如何判斷箭頭函數、... ...
  • Vue - 入門
    零：前端目前形勢 前端的發展史 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 -> 給後端(PHP、Python、Go、Java) -> 後端嵌入模板語法 -> 後端渲染完數據 -> 返回數據給前端 -> 在瀏覽器中查看 Ajax的出現 -> 後臺發送非同步請 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類