怎么編寫Vue插件

本篇內(nèi)容主要講解“怎么編寫Vue插件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么編寫Vue插件”吧!

什么是插件

在Vue框架中，如果需要給Vue增加一些我們需要的功能，Vue給我留了一個(gè)插件的方式，我們可以編寫自己的插件，然后在Vue中去注冊(cè)插件，然后去使用他。

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

插件的功能范圍并沒有嚴(yán)格的要求，根據(jù)官方的示例來說，一般有下面幾種：

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

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

3.通過全局 mixin 來添加一些組件選項(xiàng)。(如vue-router)

4.添加全局實(shí)例方法，通過把它們添加到 config.globalProperties 上實(shí)現(xiàn)。比如常見我們可能會(huì)把$http請(qǐng)求放在全局實(shí)例方法上，方便我們?cè)谌魏雾?yè)面或者組件中去使用，不再需要去顯式的import引入它。

5.一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能。如 vue-router、vuex等。

編寫插件

編寫Vue插件其實(shí)很簡(jiǎn)單，一個(gè)插件其實(shí)就是一個(gè)對(duì)象，或者是一個(gè)函數(shù)，如果是對(duì)象的話，那么就會(huì)調(diào)用對(duì)象里的 install 方法，如果是函數(shù)就會(huì)調(diào)用這個(gè)函數(shù)。無論是調(diào)用對(duì)象的 install 方法還是調(diào)用函數(shù)的方式，它們都會(huì)收到兩個(gè)參數(shù)：1是由 Vue 的 createApp 生成的 app 對(duì)象，2是用戶傳入的參數(shù)。

下面我們從最簡(jiǎn)單的一個(gè)i18n功能開始。

一般我們都會(huì)把插件放在plugins文件夾下，這樣易于維護(hù)和管理

我們創(chuàng)建一個(gè)i18n.js文件

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

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

函數(shù)接收一個(gè)key字符串，我們將使用它在用戶提供的參數(shù)對(duì)象中查找轉(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]
      }, options)
    }
  }
}

假設(shè)用戶使用插件時(shí)，將在 options 參數(shù)中傳遞一個(gè)包含翻譯后的鍵的對(duì)象。我們的 $translate 函數(shù)將使用諸如 greetings.hello 之類的字符串，這樣查找到的值將會(huì)為 Bonjour!。

例如：

greetings: {
  hello: 'Bonjour!'
}

我們還可以使用inject來提供功能或者屬性，比如，我們可以允許應(yīng)用程序訪問 options 參數(shù)以能夠使用在安裝插件時(shí)傳入的參數(shù)對(duì)象。

// 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)
  }
}

現(xiàn)在我們就可以使用 inject[i18n] 注入到一些頁(yè)面或者組件中來訪問該對(duì)象。

因?yàn)?，Vue給我提供了app對(duì)象作為插件的第一個(gè)參數(shù)，所以插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有關(guān) createApp 和應(yīng)用程序?qū)嵗母嘈畔?，?qǐng)查看 Application API 文檔。

比如下面我們?cè)诓寮?nèi)，又注冊(cè)了新的自定義指令，還有全局的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中使用插件也是非常簡(jiǎn)單，我們可以通過使用 use() 方法將插件添加到我們的應(yīng)用中。

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

第二個(gè)參數(shù)是可選的，我們可以傳一些自定義參數(shù)給插件。

// 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')

最后我們?cè)陧?yè)面中使用這個(gè)插件：

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

最終顯示：

到此，相信大家對(duì)“怎么編寫Vue插件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！