vue自定义全局组件简单步骤

1.git命令生成项目文件并启动

2.自定义组件步骤（<myLoading></myLoading>）

2.1在项目src文件下建立一个新的文件夹components,用于放置所有组件

2.2在component文件夹下新建一个loading文件夹，内部新建两个文件：index.js/Loading.vue

2.2.1在App.vue放置自己将要定义的组件

<template>
  <div id="app">
    <h3>welcome</h3>
    <myLoading></myLoading>
  </div>
</template>

2.2.2在main.js中引入Loading，并使用

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

2.2.3编写Loading.vue文件

<template>
    <div class="loading-box">
        {{msg}}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:'lading...'
            }
        }
    }
</script>

<style scoped>
    .loading-box {
        font-size: 20px;
        color:yellow;
        text-shadow: 2px 2px 5px #f60;
    }
</style>

2.2.4在loading文件中的index.js中引进Loading.vue,并定义install（这个是核心）

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

2.2.5效果图

image.png