EP39 - 外掛

Plugins 外掛，好奇有什麼好用的外掛嗎？
外掛用的好～開發沒煩惱 www
能客製化外掛也是蠻重要的～～

介紹 - Introduction

插件是自包含的代碼，通常用於為 Vue 添加應用級別的功能。這是安裝插件的方法：

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可選配置 */
})

插件可以定義為一個暴露 install() 方法的物件，或者作為安裝函數本身的函數。install 函數接收應用實例以及傳遞給 app.use() 的額外選項（如果有）：

const myPlugin = {
  install(app, options) {
    // 配置應用
  }
}

插件沒有嚴格定義的範圍，但插件有以下常見的用途：

• 使用 app.component() 和 app.directive() 註冊一個或多個全局組件或自定義指令。
• 通過調用 app.provide() 使資源可在整個應用中注入。
• 通過將它們附加到 app.config.globalProperties 來添加一些全局實例屬性或方法。

需要執行上述操作組合的庫（例如 vue-router）通常會使用插件。

Q: 組件與外掛差異？

在 Vue 中，組件（Component）和外掛（Plugin）有不同的用途和功能，以下是它們的主要差異：

定義與用途

• 組件（Component）:
• • 組件是 Vue 應用的基本構建塊，封裝了 HTML、CSS 和 JavaScript。它們用於創建可重用的 UI 部分，讓開發者能夠更好地組織和管理應用的界面。
  • 每個組件都有自己的狀態（data）和生命週期，可以接收屬性（props）並發出事件。
• 外掛（Plugin）:
• • 外掛是用於擴展 Vue 應用功能的自包含代碼，通常用於添加應用級別的功能，如全局註冊組件、添加全局方法或資源注入。
  • 外掛使用 app.use() 方法進行安裝，並且可以在全局範圍內影響應用。

2. 使用場景

• 組件:
• • 適合用於創建可重用的 UI 元素，如按鈕、表單、模態框等，並且可嵌套其他組件以構建複雜的界面。
• 外掛:
• • 適合用於需要在多個組件之間共享功能或狀態的情況，例如路由管理（vue-router）、狀態管理（Vuex）或全局事件總線。

3. 設計模式

• 組件:
• • 通常以模板和組件選項（如 data、methods、computed）的形式進行定義，並且有明確的輸入（props）和輸出（事件）。
• 外掛:
• • 通常以對象或函數的形式進行定義，包含一個 install 方法，負責配置應用的全局屬性或方法。

總結

簡而言之，組件主要用於構建 UI 元素，而外掛則用於擴展應用的功能。在實際開發中，通常會結合使用組件和外掛，以便更有效地開發和管理 Vue 應用。

編寫外掛 - Writing a Plugin

為了更好地理解如何創建自己的 Vue.js 外掛，我們將創建一個非常簡化的外掛，顯示 i18n（國際化）的字符串。

首先，我們將設置外掛對象。建議在單獨的文件中創建並導出它，以保持邏輯的封裝和分離，示例如下：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 外掛代碼在這裡
  }
}

我們希望創建一個翻譯函數。這個函數將接收一個以點分隔的鍵字符串，並用來在用戶提供的選項中查找翻譯字符串。這是模板中的預期用法：

<h1>{{ $translate('greetings.hello') }}</h1>

由於這個函數應該在所有模板中全局可用，我們將通過將其附加到 app.config.globalProperties 中來實現：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 使用 `key` 作為路徑來檢索 `options` 中的嵌套屬性
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

我們的 $translate 函數將接受像 greetings.hello 的字符串，查看用戶提供的配置並返回翻譯的值。

包含翻譯鍵的對象應在安裝期間通過額外的參數傳遞給外掛：

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

現在，我們的初始表達式 $translate('greetings.hello') 將在運行時被替換為 Bonjour!。

另見： Augmenting Global Properties 

提示：儘量少用全局屬性，因為如果在應用中使用太多不同外掛注入的全局屬性，可能會快速變得混淆。

提供/注入與外掛 - Provide / Inject with Plugins

外掛也允許我們使用注入（inject）來提供函數或屬性給外掛的使用者。例如，我們可以讓應用程序訪問選項參數，以便使用翻譯物件。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

現在，外掛使用者將能夠使用 i18n 鍵將外掛選項注入到他們的組件中：

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

NPM 打包 - Bundle for NPM

如果您還想為他人構建並發佈您的外掛，請參閱 Vite 的庫模式部分。

寫外掛感覺可以更了解全局的應用～
有機會想來寫一些有趣的外掛
再來繼續練習吧～～