小白參與vue開發已有大半年的時間，雖說開發過程中完成功能模塊基本沒有問題，但是對于項目頁面渲染和路由跳轉了解的很模糊，尤其是對于index.html、main.js、App.vue、index.js這四個文件的相互關系認識的比較模糊，上網看了很多的資料，感覺都沒能讓我茅塞頓開，所以自己由一個demo來了解一下這四個文件的相互關系。
首先給出有網上看到的關于這四個文件的基本的功能描述：
index.html
vue是單頁界面，主窗口通過index.html渲染，默認的http://localhost:8080會去加載index.html。
main.js
main.js是我們的入口文件，主要作用是初始化vue實例，并引入所需要的插件，會用App.vue替換index.html中的id='app'的div。
App.vue
App.vue是我們的主組件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子組件。
index.js
vue路由會去監聽url變化，通過路由配合找到相應組件，加載到<router-view>上，實現頁面切換。
1.初識index.html、main.js、App.vue、index.js
使用vue-cli生成vue初始項目之后，index.html、main.js、App.vue、index.js這四個文件的內容大概如下（這里只是給出了我這篇文章關注的內容，還有其他的內容，需要用到的插件之類的）：
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first-vue</title>
</head>
<body>
<div id="app" class="testindex">
</div>
<!-- built files will be auto injected -->
</body>
</html>
//main.js
new Vue({
el: '#app',
router,
//在根實例中聲明這個store,就可以在其它子組件中使用
store,
// 聲明模版
template: '<App/>',
// 注冊成組件
components: { App }
})
<!--App.vue-->
<template>
<div id="app" class="testapp">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
//index.js
export default [
{
path: '/index',
name: 'HelloWorld',
component: HelloWorld
}
]
<!--Helloword.vue-->
<template>
<div class="hello">
<h1>HelloWord!</h1>
</div>
</template>
在上面這種情況下，index.html、main.js、App.vue、index.js四個文件的相互關系是：
（1）主窗口通過index.html渲染
（2） 入口文件 main.js，創建vue實例，掛載到index.html的id="app"上面，由于vue實例中的template屬性的存在template: '<App/>'、components: { App }，導致index.html中的id="app"的div會被該組件取代。
（3）App.vue是我們的子組件，所有的頁面都是在App.vue下進行切換的，其中的<router-view/>就是用來承載路由組件的。
（4）路由文件index.js，由于在vue實例中已經注冊了router，就是在根實例中監聽路由變化，找到相應的組件，加載到App.vue中的<router-view/>上進而實現頁面切換。
2.再識index.html、main.js、App.vue、index.js
這里我們稍稍改變一下index.js這個路由文件如下：
//index.js
export default [
{
path: "/",
name: "app",
component: App,
children: [
{
path: '/index',
name: 'HelloWorld',
component: HelloWorld
}
]
}
]
再看頁面渲染之后的elements結構：
對比路由文件變化前后渲染的elements結構可以發現，在路有中將app.vue作為根路由的話，會將其作為路由組件進行渲染，由于在main.js中已經由<tempalte>元素將App.vue引入到index.html之中作為主組件渲染，最終導致App.vue這個組件渲染了兩次。
若想要在路由文件中將App.vue作為根組件聲明，那么可以先思考一下應該如何修改這幾個文件。
step1:
此時由于在main.js中已經由tempalte屬性將App.vue引入到index.html之中作為主組件渲染，最終導致App.vue這個組件渲染了兩次，我們考慮修改main.js如下：
//main.js
new Vue({
el: '#app',
router,
//在根實例中聲明這個store,就可以在其它子組件中使用
store
// 聲明模版
//template: '<App/>',
// 注冊成組件
//components: { App }
})
將template和components注釋，這樣想來應該不會再重復渲染了，看一下渲染后的元素結構：
查看結果發現此時頁面雖然index.html中的id="app"這個div沒有被app.vue取代，但是以此同時也沒有成功的加載路由組件。仔細一想不難知道原因，此時不論是app.vue還是HelloWord.vue都是路由組件，路由組件需要<router-view/>來承載，現在HelloWord.vue可以由App.vue中的<router-view/>來承載，App.vue沒有地方可以承載，所以導致無法加載。
step2.
于是我們修改index.html如下：
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first-vue</title>
</head>
<body>
<div id="app" class="testindex">
<!--新增承載路由組件的標簽-->
<router-view></router-view>
</div>
<!-- built files will be auto injected -->
</body>
</html>
新增承載App.vue這個路由組件的標簽之后，查看一下元素結構此時變為：
3.總結
通過上面簡單的示例我相信你可以對index.html、main.js、App.vue、index.js這四個文件的相互關系有了比較清晰的認識，當然里面還有很多的細節知識需要我們去深挖，后面會繼續與大家分享，有設么不對的地方，歡迎大家指出。
