vue文件加载顺序：index.html>app.vue>main.js 加载顺序详情：
- 执行index.html（index.html中id为app的div标签是一个挂载点，之后我们的Vue根实例就会挂载到该挂载点上）
- 执行main.js
- main.js找到实例挂载app.vue文件，将index.html的挂载的内容显示出来（用app.vue的template替换index.html中的）
- main.js中引入了路由，可以将对应的组件渲染到router-view中
- rouer-view加载了Layout文件
- Layout 加载Navbar, Sidebar, AppMain
从加载顺序中可以看出main.js是先执行的，但出现（index.html>app.vue>main.js）问题是由ES6的模块化加载规则导致的
ES6、CommonJs、AMD的加载规则
- CommonJS一般用于服务端比如node,AMD一般用于浏览器环境，并且允许非同步加载模块，可以根据需要动态加载模块；CommonJS和AMD都是运行时加载，ES6模块是编译时输出接口。
- CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
- 因为CommonJS加载的是一个对象，（即module.exports属性），该对象只有在脚本运行时才会生成，而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
因为ES6是编译时加载且import命令具有提升效果，会提升到整个模块的头部，优先执行，故导致上述问题
本文转载自: https://blog.csdn.net/Lucky_girl_wan/article/details/129126947
版权归原作者 Lucky_girl_wan 所有， 如有侵权，请联系我们删除。
版权归原作者 Lucky_girl_wan 所有， 如有侵权，请联系我们删除。