为什么我的 App.vue 模板中的根元素必须与 index.html 中的根元素匹配？答案

【问题标题】：Why does the root element in my App.vue template have to match the one in index.html?为什么我的 App.vue 模板中的根元素必须与 index.html 中的根元素匹配？
【发布时间】：2019-01-14 18:49:44
【问题描述】：

我使用 vue cli（版本 3.0.0-rc.10）创建了一个项目，并将其配置为使用 typescript。

在它创建的 index.html 文件中，有一个 <div id="app"></div>，如果我理解正确，main.ts 文件将通过以下代码中的 mount 函数查找

new Vue({
  render: h => h(App)
}).$mount('#app')

但是，当我查看 App.vue 文件时，它还有一个 div 的根元素，其 id 为 app。

为什么 App.vue 的模板必须有一个与 index.html 中的完全一样的 div？

【问题讨论】：

标签： vue.js

【解决方案1】：

App.vue 文件中不必有id="app"，将 ID 更改为您想要的任何内容。

$mount('#app') 替换现有 <div id="app"> 来自 index.html 而不是来自 App.vue。这只是样板代码。

【讨论】：

你知道什么原因吗？初学者很难找到。