main.js, App.vue, index.html关系

转的你死

于 2018-08-23 13:56:40 发布

阅读量2k

点赞数 4

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/a493556721/article/details/81979558

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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/>，所以路由匹配成功的页面都在这里进行渲染和切换。