前端学习——main.js和App.vue 和 index.html的关系

学习vue的时候一直在奇怪一个问题，html和vue是什么关系？如果有关系，它们是怎么关联的？

index.html文件是项目中唯一的html文件，其本身和vue没有直接关系，其本身就是最简单的html结构的问题。在这里添加了一句我是index.html

App.vue文件就是典型的vue格式的文件，其中有<template/>, <script/>,<style/>三种节点，分别对应html, js和css。一个vue文件就是一个组件，每个组件可以独立完成不同的功能，所以其既可以是一个功能点，也可以是一个单独的页面。

在App.vue文件中，添加了一句话：“我是App.vue文件

如下图所示，页面上只显示了我是App.vue文件，而没有显示我是index.html文件，那么我是index.html文件的内容跑哪去了呢？

在刷新页面的时候，我们会看到 我是index.html文件 内容 闪了一下就被app.vue的内容给覆盖掉了，这个自己可以试验一下。

这时把index.html文件的id=app 改为了id=app1，这时再看页面，只显示了 我是index.html  ，这时就明白了，index.html文件和app.vue是通过id=app这个东西进行关联的。

      

而这时main.js的作用就出来了，main.js是vue项目的主入口文件，vue实例就是在这里实例化的。

这时看到main.js的vue实例中，有一个el的属性，el属性就相当于是css的选择器，通过选择器把app.vue关联到index.html文件上，在vue的术语中叫挂载。

这时把main.js中的el的值改为#app1，这时发现app.vue的页面又正常显示了。

从这里就可以看出，index.html文件和App.vue文件是没有直接关系的，而其之间的关系是通过main.js文件进行关联的，在main.js文件中，实例化vue对象时，使用el也就是标签选择器，把App.vue和index.html的div节点进行关联。

这时当你把main.js文件中的components属性注释掉时，你会发现页面什么都不显示，页面刷新的时候，我是index.html依然会一闪而逝。说明components被注释掉之后，依然加载了app.vue文件，只不过没有正常显示。

而当把template属性注释掉时，你会发现页面显示的是 我是index.html。

这里说明了，vue和index.html文件使用的是el 通过id进行关联的，但加载app.vue是通过template进行加载的。

所以，html文件和vue的关系就相当于容器和模块的关系，vue通过id节点，把vue挂载到html上。

如下，在index.html中，新增了一个root节点到div。

这时index.html中的app1节点虽然被覆盖了，但root节点还存在。

vue的挂载点和html的节点id是一对一对关系，既不能通过相同的id挂载一个vue对象，也不能多个vue对象挂载到一个id节点上。

tips: 类似vue这种初始化的过程，new Vue({}) ，小括号中间的中括号代表着实例化vue的参数是一个对象，叫做配置对象，配置对象里面的属性值都是固定的，不能随便自己添加。