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

阳光穿透心脏的1/2处 2021-10-18 21:38 143阅读 0赞

在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，我们从培训视频或者官方文档上可以了解到：  
![在这里插入图片描述][20190813101848132.png]  
**index.html—主页，项目入口**

**App.vue—根组件**

**main.js—入口文件**

**那么这几个文件之间的联系如何呢？**

**1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
**2.在App.vue中，我做了如下处理：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
**3.在main.js中，文件初始内容如图：** （运行效果后面有代码讲解）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]  
先看运行效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]  
讲解：  
也就是说，在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分。（**但是需要注意的是，在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分**）

那么，我们就可以来分析上述的逻辑了，浏览器访问项目，最先访问的是index.html文件，  
而index.html中

<div id="app">来自index.html正文中的内容</div>

**上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；**  
main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过

import App from './App.vue'
    new Vue({
      el: '#app', //告诉vue实例要挂载的地方；（即实例装载到index.html中id为app的元素）
      components: {App },  //下面有代码讲解
       template: '<App/>'  // template: '<App/>'就是代表使用APP组件的模板
    })

讲解：通过`import App from './App.vue`’引入当前目录下的App.vue,而`components: {App }`就是给vue实例添加组件模板，模板就是组件App.vue中的template中的内容。（**template会替代原来的的挂载点处的内容**）  
**所以Vue这个实例展示的就是App.vue这个组件的内容。**

所以，我们进行总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代，所以会一直保留。

本文转载自：[https://www.cnblogs.com/chenleideblog/p/10484554.html][https_www.cnblogs.com_chenleideblog_p_10484554.html]

[20190813101848132.png]: /images/20211018/59261452819247bf946a1b4194e797a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20211018/a3111ffd58984f49b68a6a6ef6f6a68a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20211018/532b29b7866845f7a4447fd9f38cc387.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20211018/906f362738f747b49b29b1ea5ae79699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: /images/20211018/6e815efdbb0c42399d4deb399eaece1c.png
[https_www.cnblogs.com_chenleideblog_p_10484554.html]: https://www.cnblogs.com/chenleideblog/p/10484554.html