index.html
项目的运行入口，在body体中只有一个div标签，其id为app，这个id将会连接到src/main.js内容
在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分
上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y
</title>
</head>
<body>
<div id="app">test
</div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
入口文件，主要作用是初始化vue实例，并引入所需要的插件。新建了一个vue实例，并使用el：#app链接到index.html中的app，并使用template引入组件<app>和路由相关的内容，也就是说通过main.js我们关联到App.vue组件
import Vue
from
'vue'
import App
from
'./App'
import router
from
'./router'
Vue.config.productionTip =
false
/* eslint-disable no-new */
new Vue({
el:
'#app',
router,
components: { App },
template:
'<App/>'
})
App.vue
主组件，所有页面都是在App.vue下进行切换的。可以理解为所有的路由router也是App.vue的子组件。
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export
default {
name:
'App'
}
</script>
Index.js
<template>标签下，有<router-view>标签，<router-view>标签将会把路由相关内容渲染在这个地方，路由中文件位于src/router/index.js中。
在index.js的代码中，建立了路由相关的内容，也就会渲染到app.vue下面的<router-view>中。
import Vue
from
'vue'
import Router
from
'vue-router'
import HelloWorld
from
'@/components/HelloWorld'
Vue.use(Router)
export
default
new Router({
routes: [
{
path:
'/',
name:
'HelloWorld',
component: HelloWorld
}
]
})
项目加载的过程是index.tml->main.js->app.vue->index.js->helloworld.vue。
