目錄

• 什麼是外掛
• 編寫外掛
• 使用外掛
• 總結

什麼是外掛

在框架中，如果需要給Vue增加一些我們需要的功能，Vue給我留了一個外掛的方式，我們可以編寫自己的外掛，然後在Vue中去註冊外掛，然後去使用他。

通過Vue外掛我們可以實現一些Vue框架沒有的功能，也可以使用別人寫好的外掛，來幫助我們更快速的實現一些功能。

外掛的功能範圍並沒有嚴格的要求，根據官方的示例來說，一般有下面幾種：

1.新增全域性方法或者屬性，如：vue-custom-element，我們可以用外掛方式新增一些全域性元件，然後可以在任何頁面或者元件當中去使用它。這也是Element UI或者Ant Design元件庫安裝元件的方式。

2.

3.通過全域性 mixin 來新增一些元件選項。(如vue-router)

4.新增全域性例項方法，通過把它們新增到 config.globalProperties 上實現。比如常見我們可能會把$http請求放在全域性例項方法上，方便我們在任何頁面或者元件中去使用，不再需要去顯式的import引入它。

5.一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router、vuex等。

編寫外掛

編寫Vue外掛其實很簡單，一個外掛其實就是一個物件，或者是一個函式，如果是物件的話，那麼就會呼叫物件裡的 install 方法，如果是函式就會呼叫這個函式。無論是呼叫物件的 install 方法還是呼叫函式的方式，它們都會收到兩個引數：1是由 Vue 的 createApp 生成的 app 物件，2是使用者傳入的引數。

下面我們從最簡單的一個i18n功能開始。

一般我們都會把外掛放在plugins資料夾下，這樣易於維護和管理

我們建立一個i18n.檔案

export default {
  install: (app,options) => {
    // 編寫外掛程式碼
  }
}

比如我們需要一個全域性的函式來翻譯整個程式，我們可以將方法掛在app.config.globalProperties屬性上，來暴露出來。

函式接收一個key字串zHnQMSs，我們將使用它在使用者提供的引數物件中查詢轉換後的字串。

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

假設使用者使用外掛時，將在 options 引數中傳遞一個包含翻譯後的鍵的物件。我們的 $translate 函式將使用諸如 greetings.hello 之類的字串，這樣查詢到的值將會為 Bonjour!。

例如：

greetings: {
  hello: 'Bonjour!'
}

我們還可以使用inject來提供功能或者屬性，比如，我們可以允許應用程式訪問 options 引數以能夠使用在安裝外掛時傳入的引數物件。

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

現在我們就可以使用 inject[i18n] 注入到一些頁面或者元件中來訪問該物件。

因為，Vue給我提供了app物件作為外掛的第一個引數，所以外掛可以使用所有其他功能，例如使用 mixin 和 directive。要了解有關 createApp 和應用程式例項的更多資訊，請檢視 Application API 文件。

比如下面我們在外掛內，又註冊了新的自定義指令，還有全域性的mixin方法:

// plugins/i18n.js
export default {
  insthttp://www.cppcns.comall: (app,options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o,i) => { if (o) return o[i] },options)
    app.directive('my-directive',{
      mounted (el,binding,vnode,oldVnode) {
        // some logic ...
      }
      //...
    })
    app.mixin({
      created() {
        // some logic .zHnQMSs..
      }
      //...
    })
  }
}

使用外掛

上面我們編寫完外掛後，我們就可以去使用外掛了。在Vue中使用外掛也是非常簡單，我們可以通過使用 use() 方法將外掛新增到我們的應用中。

use() 方法有兩個引數。第一個是要安裝的外掛。

第二個引數是可選的，我們可以傳一些自定義引數給外掛。

// main.js
import { createApp } from 'vue'
import Roohttp://www.cppcns.comt from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}
app.use(i18nPlugin,i18nStrings)
app.mount('#apzHnQMSsp')

最後我們在頁面中使用這個外掛：

<template>
  <h1>{{ $translate("greetings.hi") }}</h1>
  <div>i18n外掛示例</div>
</template>

最終顯示：

總結

參考：https://v3.cn.vuejs.org/guide/plugins.html

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!