vue自定義組件(通過Vue.use()來使用)即install的使用

在vue項目中，我們可以自定義組件，像element-ui一樣使用Vue.use（）方法來使用，具體實現方法：

1.首先新建一個loading.vue文件

// Cmponent.vue
<template>
    <div>
        ...loading
    </div>
</template>
 
<script>
    export default {
 
    }
</script>
 
<style scoped>
    div{
        font-size:40px;
        color:#fbb;
        text-align:center;
    }
</style>

　　其次在同一目錄下建立index.js文件,在這個文件中使用install方法來全局注冊該組件

import LoadingComponent from './loading.vue'
const loading= {
    install:function(Vue){
        Vue.component('LoadingComponent',component)
    }  //'component-name'這就是后面可以使用的組件的名字，install是默認的一個方法
    
}

export default Loading

　　3.在main.js里面引入

　　

import Loading from './compontents/loading'

vue.use(Loading);

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

　　4.使用

最后你可以在任何想用這個組件的地方插入<Loading></Loading>了 組件相應的樣式和js代碼可以直接寫在第一步中的文件之中！就這樣一個自己創建的組件就這么愉快的應用啦！