插件是自包含的代碼，通常向 Vue 添加全局級功能。它可以是公開 install() 方法的 object，也可以是 function

插件的功能范圍沒有嚴格的限制——一般有下面幾種：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局資源：指令/過濾器/過渡等。如：vue-touch
3. 通過全局混入來添加一些組件選項。如：vue-router
4. 添加全局實例方法，通過把它們添加到 config.globalProperties 上實現(xiàn)。
5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如：vue-router

#編寫插件

為了更好地理解如何創(chuàng)建自己的 Vue.js 版插件，我們將創(chuàng)建一個非常簡化的插件版本，它顯示 i18n 準備好的字符串。

每當這個插件被添加到應用程序中時，如果它是一個對象，就會調(diào)用 install 方法。如果它是一個 function，則函數(shù)本身將被調(diào)用。在這兩種情況下——它都會收到兩個參數(shù)：由 Vue 的 createApp 生成的 app 對象和用戶傳入的選項。

讓我們從設(shè)置插件對象開始。建議在單獨的文件中創(chuàng)建它并將其導出，如下所示，以保持包含的邏輯和分離的邏輯。

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

我們想要一個函數(shù)來翻譯整個應用程序可用的鍵，因此我們將使用 app.config.globalProperties 暴露它。

該函數(shù)將接收一個 key 字符串，我們將使用它在用戶提供的選項中查找轉(zhuǎn)換后的字符串。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, i18n)
    }
  }
}

我們假設(shè)用戶使用插件時，將在 options 參數(shù)中傳遞一個包含翻譯后的鍵的對象。我們的 $translate 函數(shù)將使用諸如 greetings.hello 之類的字符串，查看用戶提供的配置內(nèi)部并返回轉(zhuǎn)換后的值-在這種情況下為 Bonjour!。

例如：

greetings: {
  hello: 'Bonjour!'
}

插件還允許我們使用 inject 為插件的用戶提供功能或 attribute。例如，我們可以允許應用程序訪問 options 參數(shù)以能夠使用翻譯對象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, i18n)
    }


    app.provide('i18n', options)
  }
}

插件用戶現(xiàn)在可以將 inject[in18] 到他們的組件并訪問該對象。

另外，由于我們可以訪問 app 對象，因此插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有關(guān) createApp 和應用程序?qū)嵗母嘈畔ⅲ埐榭?Application API 文檔。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, i18n)
    }


    app.provide('i18n', options)


    app.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })


    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

#使用插件

在使用 createApp() 初始化 Vue 應用程序后，你可以通過調(diào)用 use() 方法將插件添加到你的應用程序中。

我們將使用在編寫插件部分中創(chuàng)建的 i18nPlugin 進行演示。

use() 方法有兩個參數(shù)。第一個是要安裝的插件，在這種情況下為 i18nPlugin。

它還會自動阻止你多次使用同一插件，因此在同一插件上多次調(diào)用只會安裝一次該插件。

第二個參數(shù)是可選的，并且取決于每個特定的插件。在演示 i18nPlugin 的情況下，它是帶有轉(zhuǎn)換后的字符串的對象。

INFO

如果你使用的是第三方插件 (例如 Vuex 或 Vue Router)，請始終查看文檔以了解特定插件期望作為第二個參數(shù)接收的內(nèi)容。

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'


const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}


app.use(i18nPlugin, i18nStrings)
app.mount('#app')

awesome-vue 集合了大量由社區(qū)貢獻的插件和庫。