本文详细解析了Vue项目中main.js, App.vue, 和index.html之间的关系。阐述了main.js如何通过根实例挂载到index.html，并用template替换，以及App.vue组件如何包含路由视图，实现页面的渲染和切换。
main.js, App.vue, index.html关系
https://blog.youkuaiyun.com/a493556721/article/details/81979558
2018年08月23日 13:56:40 转的你死 阅读数：455
1.main.js
-
import Vue from 'vue' -
import App from './App' -
...... -
new Vue({ -
//挂载到index.html的<div id="app"> -
el: '#app', -
//router对象，包含路由信息 -
router, -
//在该根实例中注册App.vue中的App组件 -
components: {"App": App}, -
//模版，vue文档中说是会使用template来替换被挂载的节点，也就是index.html的<div id="app"> -
template: '<App/>' -
})
2.App.vue
-
<template> -
<div id="app" v-cloak> -
<!--被匹配成功的组件将会被渲染到这里--> -
<router-view/> -
</div> -
</template> -
<script> -
export default { -
name: 'App' -
} -
</script>
3.index.html
-
<!DOCTYPE html> -
<html> -
<body> -
<!--被main.js挂载的标签--> -
<div id="app"></div> -
</body> -
</html>
说明：main.js中的根实例会挂载到index.html中的<div id="app">，且用template替换，即替换为<App></App>. 由于根实例注册了App组件，所以这标签就是App.vue组件。由于App.vue中含有<router-view/>，所以路由匹配成功的页面都在这里进行渲染和切换。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
