Vue.component使用的时候并不是随便使用的，我们要遵循一个原则：

要在初始化根实例之前注册组件，例如;

<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

渲染结果为：

<div id="example">
  <div>A custom component!</div>
</div>

有个先后，特别是我们用webpack搭建的模板，毕竟main.js就创建了根实例，需要特别注意