vue main.js中app绑定的是index.html还是App.vue中？

最新推荐文章于 2024-04-02 18:46:41 发布

原创最新推荐文章于 2024-04-02 18:46:41 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

问题

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中的内容替换掉。
在这里插入图片描述