現在基於vue的UI元件庫有很多，比如iview，element-ui等。但有時候這些元件庫滿足不了我們的開發需求，這時候我們就需要自己寫一個外掛。
舉第一個栗子
用vue-cli搭建好專案目錄之後，在src/components下面新建一個資料夾放我們要寫的外掛，如圖所示:
index.vue裡寫我們的元件，程式碼如下：
index.js裡面寫index.vue的install方法，並用Vue.component註冊元件，程式碼如下：
接下來我們要在預設的main.js裡將剛剛寫的index.js檔案匯入，並通過Vue.use來使用它，程式碼如下：
大功告成，接下來在app.vue裡直接使用就可以啦，可以看到頁面已經顯示相應的元件了，如圖：
這時候我們還可以自定義click事件，並通過引數的方式傳遞給我們的外掛，外掛可以通過props屬性獲取到該事件，如圖：
可以看到頁面已經生效了：
Vue.component(id, [definition])用於註冊或獲取元件。
Vue.use(plugin)用於安裝 Vue.js 外掛。如果外掛是一個物件，必須提供 install 方法。如果外掛是一個函式，它會被作為 install 方法。install 方法呼叫時，會將 Vue 作為引數傳入。當 install 方法被同一個外掛多次呼叫，外掛將只會被安裝一次。
舉第二個栗子
我們再建一個資料夾，如圖：
我們要寫一個元件，能夠顯示外部傳進來的內容，並在3秒後自動消失，程式碼如下：
接下來我們要在index.js裡使用構造器來建立它，如圖：
依舊在預設的main.js裡引用剛剛的js檔案，並加入到Vue例項上，這樣我們就可以直接通過this.$seconddemo()來呼叫了，程式碼如下：
import SecondDemo from './components/global/seconddemo/index'
Vue.prototype.$seconddemo = SecondDemo
複製程式碼在app.vue裡使用它，發現外掛載入成功了，如圖：
Vue.extend(options)是 Vue 的構造器，用於建立一個“子類”。
統一管理自定義元件
當元件數量很多時，我們可以通過提供一個統一的出口檔案來管理這些自定義元件，首先在global資料夾下新建一個index.js檔案，程式碼如圖：
index.js檔案幫我們把所有自定義的元件都通過Vue.component註冊了，最後export一個包含install方法的物件給Vue.use()使用。
這時候我們不需要在main.js裡逐個新增動態元件了，只需要匯入統一的index.js檔案，並用Vue.use它就ok了。
import global from './components/global/index.js'
Vue.use(global)
複製程式碼