vue中main.js、index.html、app.vue文件之间的关系

在初始化的Vue项目中，我们最先接触到的就是main.js，index.html，App.vue这三个文件

main.js---入口文件

index.html---主页，项目入口

App.vue---根组件

在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分

<div id="app">index.html正文中的内容</div>

main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过

import App from './App.vue'

new Vue({
  el: '#app',
  components: {App },
  template: '<App/>'
})

实例装载到index.html中的位置；

接着，实例中注册了一个局部组件App

模板就是组件App.vue中的template中的内容，template会替代原来的的挂载点处的内容

总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代，所以会一直保留。