前言
上篇博文我們依葫蘆畫瓢已經將hello world 展現在界面上啦，但是是不是感覺新虛虛的，總覺得這么多文件，項目怎么就啟動起來了呢？怎么訪問到8080 端口就能進入到我們的首頁呢。整個的流程是怎么樣的呢？
我也是剛剛接觸，所以就會有這樣的困惑，所以這篇就簡單的理解一下項目頁面渲染的過程。
渲染過程
我們上篇文章說main.js 是無用的，是廢代碼，只是起到支撐框架的。但是其實我們應該有感覺，把他刪除了整個項目就跑步起來了。其實main.js 算是項目的入口了。我們就從這個文件看起。
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
可以看到代碼非常的少，就導入了vue.js、我們的APP.vue 以及index.js
第一次做動圖，操作像是老年人，大家見諒。上圖可以大概的看到引入的三個文件是什么了。
Vue.config.productionTip = false 我們這里暫時不管，知道是一個配置信息就可以了，感興趣的可以百度一下就知道什么意思了。
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
上面這些，如果完全沒有vue 語法知識的話，確實不知道什么意思，但是我們看官網教程，起步的時候都是在當個html 文件中使用vue 的。在js 中就會用到這個。
可以看到，其實都是差不多的，所以這里的作用就是實例化一個Vue。當然我們項目中，這里是為整個項目實例化了一個Vue ,el 指定的元素，這里就是我們index.html 中的div啦。
router 就指定路由，也就是我們在index.js 配置的路由信息。
components 指定的組件信息。項目有一個父組件就是APP.vue。我們自己寫的所有組件都是在這個父組件之下的。
怎么說呢，也就是說所有的界面，最外層的div 就是APP.vue 定義的。div 中其他的div 才是我們自己寫的。看下面這個應該就會有所感覺吧。
所以這里我們就可以解答上篇文章，為什么我們只是寫了一個hello world 。但是為什么界面上呈現的會有圖標，還有樣式。因為在APP.vue 中設置了這些動洗。我們APP.vue 中的這些內容注釋掉就可以看到效果。
我們將APP.vue logo和樣式去掉，再來看看內容
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
是不是發現和我們在組件中自己寫的Hello.vue 格式完全一樣，哈哈沒錯，vue文件就是這樣的格式。可以看到template 渲染的是id 為app 的盒子(div)。這里應該是覆蓋了index.html中的d 也為app 的盒子。
所有的 router-view 中的內容，都會被自動替換。
script 中的代碼則是腳本代碼。
至此，整個過程就出來了：項目啟動首先會讀取main.js 。實例化一個vue,然后渲染APP.vue 文件內容，我們自己寫的vue 組件則是通過路由轉接到父組件下的。
番外
我們項目的流程就講到這里把，算是對上篇的補充，讓我們對項目啟動，界面渲染算是有一個大概的了解啦，我們接下來就按照官網上講一下vue 的一些語法和特性，但是與官網上不同的是，官網上都是一個個的html,而我們就在這個項目的基礎的上。將會是一個個的vue 文件。
代碼上傳到github：
https://github.com/QuellanAn/zlflovemmVue
后續加油♡
歡迎大家關注個人公眾號 "程序員愛酸奶"
分享各種學習資料，包含java，linux，大數據等。資料包含視頻文檔以及源碼，同時分享本人及投遞的優質技術博文。
如果大家喜歡記得關注和分享喲❤
