vue-cli-----vue实例中template: '<App/>',这样写是什么意思

我刚开始学，看这个东西看了好久，官网文档的描述我不太理解，今天终于算明白了

官网的描述：

模板将会替换挂载的元素。挂载元素的内容都将被忽略

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

如果还是不明白，改成这样子就好理解了：

index.html

<div id="myapp">
    <app></app>
</div>

main.js

new Vue({
    el:'#myapp',
    router,
    components:{App}
})

这样写的意思是：实例化一个Vue，挂载到id为myapp的div里面，这个vue实例有个局部组件App。

简单的验证方法，在index.html中，在div根标签中编写一个文本，看加载App组件的时候是否会显示，还是被替换：

例如我在index.html中加的为：

    <div id="app">
      <h1>王小子</h1>
    </div>

当项目启动访问后是看不到王小子这几个字的，说明

这个标签整个都会被替换掉，所以即使我们看到APP.vue文件中定义的根标签也为'id="app"',也不会冲突的原因

---

webpack的模板写得这么绕的原因：（个人猜测）

• 如果像我那样写，dom树多了个不必要的div层
• 旧的版本应该是可以把实例挂载到body、header元素的，但是新的版本会报错：不要尝试挂载到body元素。