vue文件加载顺序：index.html>app.vue>main.js      加载顺序详情：

1. 执行index.html（index.html中id为app的div标签是一个挂载点，之后我们的Vue根实例就会挂载到该挂载点上）
2. 执行main.js
3. main.js找到实例挂载app.vue文件，将index.html的挂载的内容显示出来（用app.vue的template替换index.html中的<div id="app"></div>）
4. main.js中引入了路由，可以将对应的组件渲染到router-view中
5. rouer-view加载了Layout文件
6. Layout 加载Navbar, Sidebar, AppMain

从加载顺序中可以看出main.js是先执行的，但出现（index.html>app.vue>main.js）问题是由ES6的模块化加载规则导致的

ES6、CommonJs、AMD的加载规则

1. CommonJS一般用于服务端比如node,AMD一般用于浏览器环境，并且允许非同步加载模块，可以根据需要动态加载模块；CommonJS和AMD都是运行时加载，ES6模块是编译时输出接口。
2. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
3. 因为CommonJS加载的是一个对象，（即module.exports属性），该对象只有在脚本运行时才会生成，而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

因为ES6是编译时加载且import命令具有提升效果，会提升到整个模块的头部，优先执行，故导致上述问题