vue.2.0-自定义全局组件

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>