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

最新推荐文章于 2024-02-26 17:58:14 发布

zlting~

最新推荐文章于 2024-02-26 17:58:14 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/107343085

VUE 专栏收录该内容

116 篇文章

订阅专栏

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>