有時候我們在做開發的時候，就想自己寫一個外掛然後就可以使用自己的外掛，那種成就感很強。博主最近研究element-ui和axios的時候，發現他們是自定義元件，但是唯一有一點不同的是，在用element-ui的時候是使用Vue.use()語句來使用的，而axios的時候，不用Vue.use()，只要import就可以匯入進來了，感覺很神奇，細細的發現，原來他們的不同是因為axios裡面並沒有寫install方法，而element-ui就有寫這個方法，下面就利用這個install來寫一個自己的外掛。

    首先寫這個外掛之前生成好一個目錄來存放這個外掛。博主我是將他放在一個component的loading目錄下：

    在該目錄下，按博主習慣是寫一個index.js檔案還有一個元件loading.vue，index.js裡面寫的是關於loading.vue的install方法。程式碼如下所示：

import LoadingComponent from './Loading.vue'
const Loading={
    install:function (Vue) {
        Vue.component('Loading',LoadingComponent)
    }
}
export default Loading

    然後Loading.vue程式碼如下所示：

<template>
    <div class="loading-box">
Loading...
    </div>
</template>
<script></script>

    Loading.vue程式碼寫完後然後就在預設的main.js檔案中匯入，通過使用Vue.use()方法匯入剛剛寫好的index.js：

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use
 
(Loading)

new Vue({
  el: '#app',
render: h => h(App)
})

    然後就在App.vue方法裡面使用該模板就可以了：

<template>
  <div id="app">
    <Loading></Loading>
  </div>
</template>

    你也可以在剛剛的loading.vue檔案裡面寫自己的一些程式碼，比如寫一個日曆外掛，按鈕外掛等等。如下面這個：

<template>
    <div class="loader">
        <div class="loader-inner ball-spin-fade-loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</template>
<style scoped>
.loader{
        width:80px;
height: 80px;
margin:50px auto;
}
    @keyframes ball-spin-fade-loader {
        50% {
            opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }

        100% {
            opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }

    .ball-spin-fade-loader {
        position: relative; }
    .ball-spin-fade-loader > div:nth-child(1) {
        top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
animation: ball-spin-fade-loader 1s 0s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(2) {
        top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(3) {
        top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(4) {
        top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(5) {
        top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(6) {
        top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(7) {
        top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(8) {
        top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
    .ball-spin-fade-loader > div {
        background-color: #399;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
</style>