在初始化的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中
<div id="app">來自index.html正文中的內容</div>
上面有一個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部分不會被取代，所以會一直保留。