三种创建方法：
注意：
1.模板template中只能有一个根节点
2.组件的名字，如果采用驼峰命名的话，如myName,那么在使用的时候只能只用my-name
1.vue.extend结合vue.component创建
<body>
<div id="app">
<index-a></index-a>
</div>
<script>
// Vue.extend()函数会返回一个组件的构造器，它里面包含一个参数，它是一个对象，里面是一些配置项
// Vue.component()函数会利用Vue.extend()返回的构造器创建一个组件的实例，它有两个参数，一个是组件的名字，另一个组件的构造器
var Index = Vue.extend({
// 指定组件显示的模板
template: "<div>我是首页</div>"
})
// 创建一个全局组件index-a
Vue.component('indexA', Index)
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
- vue.component创建
<body>
<div id="app">
<index-b></index-b>
</div>
<script>
Vue.component('indexB', {
template: `<div>我是首页</div>`
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
- template方式创建
<body>
<template id='test'>
<div>我是首页</div>
</template>
<div id="app">
<index-c></index-c>
</div>
<script>
Vue.component('indexC', {
template: '#test'
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>