在一般的vue項目中，都會用到Loading或者Alert之類的彈窗浮層，而他們是一種比較高頻率出現的組件。
一般情況下，我們都會去直接import該組件，然後直接以標籤的形式引用進去當前頁面組件中，如下圖：
這種是我們比較常用的一種方法，它的好處就是讓我們比較直觀地對組件進行調用， 方便地通過標籤上的屬性動態地傳給該組件，或者去獲取子組件emit出來的事件。而我們也比較容易理解該組件在當前父組件中的運作情況。
如果該組件只是屬於某個組件頁面中的而已，這種方法確實可以省去編程中的一些不必要的耦合，提升代碼質量以及可讀性。但是，如果像我一開頭說的Loading或者Alert這種可能到處都會出現的組件來說，這種引用（import）方法就會造成不必要的重複代碼出現，所以對於這種組件，我們要將其改造，使之引用一次，到處就都可以隨意使用的插件！
首先，我們需要有一個拿來改造的vue組件，這裏我只顯示部分我要改造的vue組件的代碼：
export default {
name: 'Loading',
data () {
return {
isShow: false // 控制是否顯示
}
}
}
我這個loading組件中除了html結構和css樣式，js的代碼就是這一個參數，到時候我們將操作這個參數，來達到控制顯示隱藏的功能。
然後，我們爲該組件單獨創建一個目錄：
目錄裏面有兩個文件，一個是組件模板文件(Loading.vue)和index.js，index.js的作用，我自己的理解就是，把該組件內部的方法鏈接到我當前js裏面，然後進行調用。index.js這個文件算是一個組件的配置文件吧。
在對index.js文件進行代碼編寫前，我們需要去了解一下vue官方文檔裏面，是如何開發vue插件的。傳送門：https://cn.vuejs.org/v2/guide/plugins.html#開發插件
好吧，官方文檔說得這麼簡單，連個簡單的例子都不給！但是這裏面說到了一些重點，首先我們在這個插件裏面，要有一個公開的方法install，它接受兩個參數，一個是Vue構造器，第二個是可選的參數對象（也就是我們自定義的一些參數,比如主題啊什麼的）。然後編寫插件有四種方法將其“綁定”到Vue上面，這裏我只用到了上圖中第3點和第4點。
接下來我們來封裝一下該組件，我的代碼如下：
在這裏要說的一點及時，當掛載到Vue上面時，有兩種方法，一種是Vue.mixin()，也就是全局混入，另一種是添加到實例方法。一般我覺得使用添加到實例方法比較好，具體可看下圖官網的說法：
我的理解就是大概說可能你的組件中的參數或者方法可能會跟其他組件的一樣，可能會帶來不必要的麻煩。
至此，我們便完成了loading組件的封裝。接下來我們在main.js裏面註冊引用
接下來我們要使用這個插件，現在就非常簡單了，我們直接在某個需要用到的組件中，直接調用Vue實例上面的方法即可，
這樣我們就將loading浮層打開了。一個簡單的loading插件就這樣子完成了。接下來就可以自己動手再搞一個Alert啦~
最後要感謝一下這個博主的這篇文章給了我一些思路：https://www.jianshu.com/p/180bf559339d