App.vue

<template>
  <div id="app">
    <h3>welcome vue-loading</h3>
    <Loading></Loading>    <!--<Loading></Loading>是自定義組件--> 
  </div> 
</template>

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘

import Loading from ‘./components/loading‘  //定義Loading,components、loading是一個文件夾，loading裏面必須要index.js

Vue.use(Loading)    //use Loading

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

index.js

import LoadingComponent from ‘./Loading.vue‘

const Loading = {     //定義Loading
    install: function(Vue) {//install是必須的
        Vue.component(‘Loading‘, LoadingComponent)//定義一個組件
    }
};

export default Loading

Loading.vue

<template>
    <div class="loading-box">
        {{msg}}
    
 
</div>
</template>
<script>
    export default{
        data(){
            return {
                msg:‘Loading...^_^‘
            }
        }
    }
</script>
<style scoped>
    .loading-box{
        color: red;
        font-size: 40px;
        font-family: 微軟雅黑;
        text-shadow
 
: 2px 2px 5px #000;
    }
</style>

vue.2.0-自定義全局組件