在日常的專案中，如果我們需要頻繁的使用某些功能，那麼最好的辦法就是將這個功能封裝成函式來使用。在vue中，我們同樣也會經常將常用的元件分離出來，這樣既便於我們的使用，同時也便於之後的維護。

同樣，當某個元件在許多專案中都要頻繁的使用，那麼我們可以將其寫成一個外掛，vue官方的文件中也有簡單的介紹外掛的開發和使用方法

在最近的工作中，因為經常要用到element-ui中的一些元件，但是很多時候又需要一些自定義的功能，在查看了element-ui的部分原始碼後，基於自己的理解，實現了一個彈窗外掛。
github：https://github.com/fisher-zh/fisher-ui

Vue外掛實現流程：

外掛我認為可以理解為一個在全域性宣告的元件。我們在使用自定義元件的時候時候需要在每個使用到檔案中引入，但是如果在全域性引入了外掛那麼就可以直接使用。當然element-ui之類的按需載入例外，那個之後再說。

在外掛內部的程式碼其實和元件基本是沒有什麼差別的，外掛區別於元件的地方就在於其要公開一個install方法。這個方法的寫法在官方文件已經很清晰了，這裡不再贅述。

以我所實現的彈窗外掛為例，我所使用的是直接在Vue例項上掛載一個全域性的方法。

import MessageBox from './src/main.js'
 


const install = function(Vue, opt = {}) {
  Vue.prototype.$messageBox = MessageBox
}

export default {
  install,
  MessageBox
}

使用

import MessageBox from '../packages/message-box'
Vue.use(MessageBox)