在初始化的 Vue 项目中，我们最先接触到的就是 main.js，App.vue，index.html 这三个文件，我们从培训视频或者官方文档上可以了解到：

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

App.vue--- 根组件

main.js--- 入口文件

那么这几个文件之间的联系如何呢？

1. 先看 index.html 中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记）

2. 在 App.vue 中，我做了如下处理：

3. 在 main.js 中，文件初始内容如图：

那么我们打卡的网页如何呢？

网页效果如下：

也就是说，在网页的 Title 部分，加载了 index.html 中定义的 Title，而在正文部分，加载了 App.vue 中定义的部分。（但是需要注意的是，在浏览器打开的瞬间，浏览器中正文部分会瞬间显示 index.html 中定义的正文部分）

那么，我们就可以来分析上述的逻辑了，浏览器访问项目，最先访问的是 index.html 文件，

而 index.html 中

 上面有一个 id 为 app 的挂载点，之后我们的 Vue 根实例就会挂载到该挂载点上；

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

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

告诉该实例要挂载的地方；（即实例装载到 index.html 中的位置）

接着，实例中注册了一个局部组件 App，这个局部组件 App 来自于哪儿呢？

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

这个局部组件是当前目录下的 App.vue；

而起模板是什么呢？模板就是组件 App.vue 中的 template 中的内容。（template 会替代原来的的挂载点处的内容）

 所以 Vue 这个实例就是战士的是 App.vue 这个组件的内容。

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

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