vue中main.js，App.vue，index.html，index.js之间关系进行总结

不念不忘少年蓝@ 2023-10-05 17:09 18阅读 0赞

#### **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>
         
         
          
        
        
         
        
        
        
         
         
         
          
        
        
         
        
        
         
         
         
              
          
          
           
         
         
          
        
        
         
        
        
        
         
         
         
          
        
        
         
        
        
         
         
         
            
          
          
           </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。**