问题
vue cli默认生成的工程中，main.js绑定了#app，绑定的是index.html中的div还是App.vue中的div？
//main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
// /index.html
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
//App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
将index.html、main.js都改为id="app111"，App.vue中改为id="app222"，观察效果，id=app222，所以main.js中的id="app"绑定的是index.html，然后用App.vue中的内容替换掉。
总结
main.js中的#app绑定了index.html的<div id="app"></div>，并用App.vue内容替换div标签及其内容。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/20322.html