vue中main.js、index.html、App.vue中的app是什么关系?

Vue主组件与入口文件解析

最新推荐文章于 2025-05-20 20:41:41 发布

原创最新推荐文章于 2025-05-20 20:41:41 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

117 篇文章

订阅专栏

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

1.main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
2.App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件。
3. main.js中的#app绑定了index.html的<div id="app"></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 
// 测试:将默认的id="app" 替换为id="acc"
<template>
  <div id="acc">
    <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>