vue中main.js，App.vue，index.html，index.js之间关系进行总结
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。
