vue 加载动态组件

背景

之前的文章vue动态加载静态js插件已经介绍，可以使用ajax的方式加载静态js库,项目里会把这些插件缓存在一个全局变量allPluginsComps里，可随时修改。

    for (const item of this.installedList) {
        let url =
          "/plugins/" + item.pluginId + "/dist/" + item.pluginId + ".common.js";
        const response = await this.$axios.get(url);
        if (response.status === 200) {
          this.allPluginsComps[item.pluginId] = eval(response.data);
        }
      }

通过vue加载动态组件可以实现，activePluginId是激活的pluginId。

<component :is="allPluginsComps[activePluginId]"> </component>

按整个实现来说，加载动态组件其实并不难，难得是整套的实现思路。思路清晰了写起代码才easy。本次加载动态组件的过程一共分了3步走：

1. vue-cli3 打包组件为单个js文件
2. vue动态加载静态js插件
3. 本文

欢迎讨论交流呀~~