Vue2.0自定义全局组件

1.首先搭建好vue-cli脚手架

自动生成后删除不需要的代码，下面是我的文件路径 image.png

2.这里是components / loading / Loding.vue文件里面内容

<template>
    <div class="loading_box">{{msg}}</div>
</template>
<script>
    export default{
        data(){
            return{
                msg:'Loading…'
            }
        }
    } 
</script>
<style scoped>
.loading_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 5rem;
    color: royalblue;
}
</style>

3.这里是components / loading / index.js文件里面内容

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

index.js导出组件，里面需要install  

4.这里是main.js文件里面内容

import Vue from 'vue';
import App from './App.vue';

import Loading from './components/loading';   //默认情况下找的是index文件
Vue.use(Loading);   //必须有install

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

5.这个时候在App.vue里面写上组件名称

<template>
  <div id="app">
      <Loading></Loading>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

这里面只是简单加了一个 <Loading></Loading> 组件

6.这个时候npm run dev 跑起来就能看见了 效果了

image.png