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
     
    

    
     
    
    
     
          }
     
    

    
     
    
    
     
        ]
     
    

    
     
    
    
     
      })