一篇文章告訴你如何編寫Vue插件

Posted on by

什麼是插件

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

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

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

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

2.添加全局資源：指令/過渡等。如：vue-touch，我們也可以用插件方式去添加一些全局的自定義指令，來實現我們的功能。

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.js文件

export default {
  install: (app, options) => {
    // 編寫插件代碼
  }
}

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

函數接收一個key字符串，我們將使用它在用戶提供的參數對象中查找轉換後的字符串。

// 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.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
    app.provide('i18n', options)
  }
}

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

因為，Vue給我提供瞭app對象作為插件的第一個參數，所以插件可以使用所有其他功能，例如使用 mixin 和 directive。要瞭解有關 createApp 和應用程序實例的更多信息，請查看 Application API 文檔。

比如下面我們在插件內，又註冊瞭新的自定義指令，還有全局的mixin方法:

// 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)
    }
    app.provide('i18n', options)
    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      //...
    })
    app.mixin({
      created() {
        // some logic ...
      }
      //...
    })
  }
}

使用插件

上面我們編寫完插件後，我們就可以去使用插件瞭。在Vue中使用插件也是非常簡單，我們可以通過使用 use() 方法將插件添加到我們的應用中。

use() 方法有兩個參數。第一個是要安裝的插件。

第二個參數是可選的，我們可以傳一些自定義參數給插件。

// main.js
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')

最後我們在頁面中使用這個插件：

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

最終顯示：

image-20211118233316846

總結

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

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

推薦閱讀：