component是注册全局组件，在实例化VUE前调用，注册后可以全局使用

Vue.component('todo-item',{
  props:['grocery'],
  template:'<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

components是局部注册组件，注册后只能在当页调用。

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
 // ...
  components: {
  // <my-component> 将只在父模板可用
  'my-component': Child
 }
})

还有一种使用VUE.use()注册的方法。
如/components/loading/文件夹下有多个文件 index.js 和loading.vue文件，其中loading.vue普通组件文件，index.js文件如下

import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
    install: function(Vue){
        Vue.component('my-load',MyLoading );
    }
}
//导出组件
export default Loading

或是直接输出

import MyLoading from './Loading.vue'
// 这里是重点
export default {
    install:function(Vue){
        Vue.component('my-load',MyLoading );
    }
}

在main.js 里面只要在new Vue前 加上

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