一个简单的main.js代码分析

代码展示

import Vue from 'vue';
import { HttpLoader, UiLoader } from './loader';
import axios from 'axios';
import './assets/panoFont/font.css';
import './assets/font/iconfont.css';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

(async () => {
  const hub = new Vue();
  Vue.config.productionTip = false;
  Vue.prototype.$hub = hub;
  await axios.get('config/config.json').then(res => {
    global.Config = res.data;
  });
  await new Promise(resolve => {
    new HttpLoader().load();
    new UiLoader().load();
    resolve();
  });
  /* eslint-disable no-new */
  Promise.all([
    import('./App.vue'),
    import('./router'),
    import('./store')
  ]).then(([{ default: App }, { default: router }, { default: store }]) => {
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App),
      beforeCreate () {
        Vue.prototype.$bus = this; // 安装全局事件总线
      }
    });
  });
})();

这段代码是一个现代的JavaScript（通常是ES6及以上版本）项目的入口文件，通常用于Vue.js前端框架应用程序的初始化。下面是对这段代码的详细解释：

模块导入

代码导入了所需的依赖模块和资源：

• import Vue from 'vue'：导入Vue库，用于构建用户界面。
• import { HttpLoader, UiLoader } from './loader';：从本地的loader文件导入了HttpLoader和UiLoader类，用于加载HTTP资源和UI组件。
• import axios from 'axios';：导入了axios库，这是一个基于Promise的HTTP客户端，用于浏览器和node.js。
• import './assets/panoFont/font.css'; 和 import './assets/font/iconfont.css';：导入CSS样式文件，包含了字体或图标的样式定义。
• import * as echarts from 'echarts';：导入了echarts库，它是一个使用JavaScript实现的功能丰富的图表库。

Vue实例属性扩展

Vue.prototype.$echarts = echarts;：将echarts实例绑定到Vue的原型上，这样在Vue的所有组件中可以通过this.$echarts来访问echarts。

初始化Vue实例

随后的代码块是一个自执行的异步函数，它按顺序执行了一系列的异步操作，最终初始化了Vue实例。

1. const hub = new Vue();：创建一个新的Vue实例，用作事件总线。
2. Vue.config.productionTip = false;：禁止Vue在启动时生成生产提示。
3. Vue.prototype.$hub = hub;：将事件总线实例hub添加到Vue的原型上，这样任何组件都可以通过this.$hub来访问总线。
4. 使用axios获取配置文件config/config.json，并将其内容赋值给global.Config。这样配置可以在全局范围内访问。
5. 通过创建HttpLoader和UiLoader的实例并调用它们的load方法来加载网络和UI资源，这些资源的加载完成后，才会进行下一步动作。

懒加载Vue组件和插件

接下来，使用Promise.all来处理懒加载Vue的根组件App.vue、路由（router）、和Vuex存储（store）。在它们都加载完毕后，执行以下动作：

1. new Vue({...})：创建一个新Vue实例。
2. el: '#app'：指定Vue实例将要挂载的DOM元素的选择符（即id为app的元素）。
3. router 和 store：分别传入路由和Vuex的实例。
4. render: h => h(App)：使用渲染函数渲染根组件App.vue。
5. beforeCreate()：Vue生命周期钩子，其中安装了全局事件总线，通过Vue.prototype.$bus = this;使得任何组件都可以通过this.$bus来触发或监听事件。

最后，自执行函数的方式确保了当JS文件被加载时，这些操作能自动执行，完成Vue应用的初始化过程。