Vue3入口文件解析

vue作为渐进式的前端框架，当颂颤我们仅仅在H5页面中茄逗轻量引入的时候会这样写：

const { createApp, reactive} = Vue

那么我们是如何导出这些对象的呢？颤樱卖让我们来看一下 vue.global.js 文件源码：

看懂了这个函数，其实也就明白了我们是怎么获取到对象的，这其实是一个 立即加载函数 。

下面说下Vue项目启动的加载逻辑：

首先前端项目默认入口都是index.html

这里有个DIV的id为app，这里是vue的挂载点，后续views中的 .vue文件都会挂载在这里。

程序运行index.html后会寻找用到app的文件，即main.js

这里创建了一个vue实例，挂载了#app，也就是index.html中的id为app的液薯div元素，接着加载App.vue中的页面

打开App.vue文件，查看配置有router-link和router-view

router-link 定义点击后导航到哪个路径下

router-view 会动态的把对应的组件内容渲染到router-view中

上面router-view中加载的内容有路由决定，于是再到路由文件查看此路由定义

路由配置文件中如图所示两种芦埋昌方式都可以实现。

接下来加载的就是具体的功能模块了

例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块

关联了该组件，也会加载进去

项目运行起来后，会先去找入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板，如果陪扒模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。

---