我刚开始学,看这个东西看了好久,官网文档的描述我不太理解,今天终于算明白了
官网的描述:
模板将会替换挂载的元素。挂载元素的内容都将被忽略
也就是说: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
。
webpack的模板写得这么绕的原因:(个人猜测)
- 如果像我那样写,dom树多了个不必要的div层
- 旧的版本应该是可以把实例挂载到body、header元素的,但是新的版本会报错:不要尝试挂载到body元素。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…