File loading order in vue

Vue file loading sequence: index.html>app.vue>main.js Loading sequence details:

1. Execute index.html (the div tag whose id is app in index.html is a mount point, and then our Vue root instance will be mounted to the mount point)
2. Execute main.js
3. main.js finds the instance to mount the app.vue file, and displays the mounted content of index.html (replace <div id="app"></div> in index.html with the template of app.vue)
4. Routes are introduced in main.js, and the corresponding components can be rendered into router-view
5. rouer-view loaded the Layout file
6. Layout loads Navbar, Sidebar, AppMain

It can be seen from the loading sequence that main.js is executed first, but the problem (index.html>app.vue>main.js) is caused by the modular loading rules of ES6

Loading rules for ES6, CommonJs, AMD

1. CommonJS is generally used on the server side such as node, and AMD is generally used in the browser environment, and allows asynchronous loading of modules, which can be dynamically loaded as needed; both CommonJS and AMD are loaded at runtime, and ES6 modules are compiled-time output interfaces.
2. CommonJS modules output a copy of a value, while ES6 modules output a reference to a value;
3. Because CommonJS loads an object (that is, the module.exports property), this object will only be generated when the script is running, and the ES6 module is not an object, and its external interface is only a static definition, which will be generated during the static analysis phase of the code generate.

Because ES6 is loaded at compile time and the import command has a promotion effect, it will be promoted to the head of the entire module and executed first, which leads to the above problems