官网的描述：
模板将会替换挂载的元素。挂载元素的内容都将被忽略 也就是说:template: ‘’ 表示用替换index.html里面的
举个例子：
main.js:
------------------
import App from '@/App'
new Vue({
el: '#app',
components:{App},
template: '<App/>'
})
App.vue
-------------------
<template>
<transition name="fade">
<router-view></router-view>
</transition>
</template>
<script>
export default {
}
</script>
index.html
--------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuecli_01</title>
</head>
<body>
<div id="app">11</div>
<!-- built files will be auto injected -->
</body>
</html>
在main.js中，vue实例的components 是声明有哪些组件，我们通过import App from '@/App'导入，template 是使用哪个组件，el: '#app' 是index.html 的<div id="app"></div>,它将被替换为mian.js中导入的组件App.vue，组件一般使用的方法就是<App></App>,
- 需要注意的是，在components:{App}中采用了缩写，本来应该是components:{App：App},组件名和模板名一样，就缩写了
其实一个组件就等于是自定义标签一样。都是tag