我使用vue-cli创建了一个应用程序支架。没有明确的说明（AFAICT）显示生成的文件App.vue和index.html之间的关系。
从结果页面看来，index.html包含从App.vue生成的HTML。但是，以上两个命名文件都具有带有div的{{1}}元素的HTML。这些文件的目的是什么？为什么它们都具有相同ID的元素，因为元素ID应该是文档中的唯一标识符？
id="app"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
答案 0 :(得分：0)
此
new Vue({
render: h => h(App)
}).$mount("#app");
将App组件提供给#app DOM元素，即用<div id="app"></div>呈现的模板替换index.html中指定的App。
在index.html中可以为<div id="app"></div>，在App.vue <div id="rendered-app"></div>中可以为<template>。不需要index.html和App.vue都包含<div id="app"></div>，但这是有道理的，因为替换了原来的div并且可以保证只有一个具有app id的元素。