有時候我們在做開發的時候，就想自己寫一個插件然后就可以使用自己的插件，那種成就感很強。博主最近研究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
其中install方法表示在main.js中，如果使用Vue.use()方法的話，則該方法默認會調用install方法。在install方法里面還注冊了組件，這里面'Loading'指的是外面App.vue使用的組件名，LoadingComponent指的是上面引過來的Loading.vue。之后通過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>
效果是一個滾動的圓：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
