vue项目执行过程

1.main.js文件中主要创建vue实例、引入组件、引入vue框架、引入路由文件，是vue项目的入口文件。控制初次加载vue项目所需要加载的组件，并在创建vue实例的过程中设置挂载，即将App.vue组件挂载到了index.html页面中id为app的节点上。挂载后会对原页面进行覆盖，index.html主页中原本的内容会闪现一下但是很快会被App组件的内容覆盖。

2.index.html中是只有一个空div元素的网页，是主页。因为vue是单页面应用，所有的vue组件都通过index.html渲染。index.html通过id名与main.js中的vue实例挂载，将main.js引入的组件App.vue渲染在挂载点上。

3.App.vue是根组件，包括template、script、style三个部分，其中template部分展示html部分和配置的路由界面，script部分定义了JavaScript的数据和业务逻辑，style部分定义了组件的样式，美化视图。需要注意的是vue组件中JavaScript部分的data必须定义为函数并用return返回所需要的数据，这是因为vue中的组件是用来复用的，为了防止data数据也被复用，data必须定义为函数。每复用一次vue组件，组件中的数据就会重新被复制一次，即使其他组件中的数据发生了变化，也不会影响各个组件中各自的数据。如果将data定义为普通对象形式，一个组件内数据发生变化也会影响另一个组件内的数据，因为data默认采用相同的构造方法。同时需要通过default exprot导出便于在main.js中import引入相应的组件。

4.index.js用于配置路由，用于将vue组件引入以后再配置路由。在routes中设置路由跳转的路径，component是组件名，与import引入时的名字相同。

5.当一个vue项目启动时，首先加载index.html中的视图，再通过挂载点显示main.js中vue实例引入的组件，即App.vue根组件渲染在页面上。如果App.vue中使用了路由，则会根据index.js路由配置文件中配置的路径渲染对应的vue组件。总的过程基本为：index.html->main.js->App.vue->index.js->XXX.vue

6.入口文件是什么意思？入口文件就是webpack打包的入口，webpack通过main.js入口进入进行模块分类打包，构建新的关系图。

7.页面之间的关系是什么？除了根组件以外的vue组件通过index.js文件配置路由，再通过App.vue连接路由按需加载。