浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

最新推荐文章于 2023-09-27 14:35:10 发布

halcyon.fun

最新推荐文章于 2023-09-27 14:35:10 发布

阅读量610

点赞数 1

本文链接：https://blog.csdn.net/qq_42770949/article/details/106633544

版权

项目部署完成后的项目结构以及解释如下图所示
在这里插入图片描述

项目运行
项目的运行入口index.html

为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js，以及他们之间的关系是如何联系起来的呢，这块的配置文件位于build文件夹下，包括webpack.dev.conf.js等，感兴趣的可以了解下。通过项目的配置文件，可以加载运行我们的index.html文件以及自动关联vue相关的模块。

首先我们来看一下index.html中的内容

<!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"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在body体中只有一个div标签，其id为app,这个id将会连接到src/main.js内容，接着我们看一下main.js中的主要的代码
在main.js中，新建了一个vue实例，并使用el：#app链接到index.html中的app，并使用template引入组件和路由相关的内容（具体的涉及到vue的语法规则，如果不理解的先记下来吧，继续往后看，等了解vue的相关内容后，可能会更清晰）。也就是说通过main.js我们关联到App.vue组件，接着，我们继续看一下App.vue组件中的内容。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

看一下App.vue中的内容，是一个标准的App.vue模板的形式，包含了、、三部分，从template标签中可以看到，使用img标签加载了vue的图像，也就是我们使用npm run dev运行vue项目后看到的图像，那么图像下面的内容是从哪里渲染出来的呢？

我们注意到，标签下，除了标签外，还有标签，标签将会把路由相关内容渲染在这个地方，接下来，我们看一下路由的内容有哪些，在哪里出现的。其实，这个文件位于src/router/index.js中，我们看一下index.js中的代码

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.js的代码中，建立了路由相关的内容，也就会渲染到app.vue下面的中。在index.js中，将helloworld组件发布为路由，换句说，index.js在这里就是将helloword发布为路由，以在图片下面进行展示helloword内容，接下来我们再看看components/helloword中的内容是啥(由于里面的内容比较多，这里我们只截取了template中的内容)。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

在helloworld.vue的template中，我们可以看到界面上渲染的一些连接等内容。到此，这个页面的加载渲染过程结束了。

总结
通过上述过程，我们可以看到项目加载的过程是index.tml->main.js->app.vue->index.js->helloworld.vue。这里只是对我们运行项目后，如何出现首页面做了简单的解释，对具体的实现没有进行分析。

halcyon.fun

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

项目部署完成后的项目结构以及解释如下图所示项目运行项目的运行入口index.html为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js，以及他们之间的关系是如何联系起来的呢，这块的配置文件位于build文件夹下，包括webpack.dev.conf.js等，感兴趣的可以了解下。通过项目的配置文件，可以加载运行我们的index.html文件以及自动关联vue相关的模块。首先我们来看一下index.html中的内容&
复制链接

扫一扫