本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
前言
大家好我是多肉攻城狮，在前面的文章中我们介绍了页面设计器中组件通过拖拉拽构建页面及组件间交互配置的实现原理。相信在这些介绍中，大家能够根据这些原理编写自己的低代码页面设计器。那么当我们面对一些较为复杂的页面时，极有可能提供在设计器组件列表中的组件无法提供有效的支持，面对这种情况我们如何解决呢？这里我们就需要给页面设计器提供一种支持二次扩展开发的机制，让我们能够通过代码开发的方式对页面设计器的组件列表进行有效的补充。这样，我们只需要补充组件，就可以实现任何复杂的UI展示形式了。
那么如何实现页面设计器中组件列表的扩充呢？首先我们需要先开发一个自定义的组件，进行编译打包，将打包好的组件文件存储到服务器端，维护组件列表，将自定义组件与服务器端的组件文件进行关联。这样。我们在将组件拖入到画布中时，只需要从服务器端获取到组件文件，利用vue中的组件注册机制进行组件的动态注册，最后就可以通过vue中的动态组件进行组件的使用和渲染了。
在以上过程中，需要重点关注一下如何进行组件的开发及编译和如何进行组件动态引用及注册。
组件的编译
开发好的vue组件如何进行编译才能动态加载注册呢？其实非常简单，我们只需要将vue组件编译成umd（通用模块定义规范，通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行）格式的js文件就可以了。
当组件使用webpack进行编译时，可以将webpack的output参数设置设置为umd模式。
output: {
library: "library-name",
libraryTarget: "umd",
}
使用vue-cli进行编译则更为简单，vue-cli可将目标构建为库。
vue-cli-service build --target lib --name myLib [entry]
通过以上构建命令，可将vue组件编译为以下文件，使用时我们可选择umd.js或者umd.min.js文件。
组件的动态加载及注册
组件编译为的js文件有了，我们如何进行动态的加载呢？只需要动态的引入script标签然后将src属性设置为组件js文件的地址就可以了，我们可以通过下面的代码进行js文件的动态引入。
const script = document.createElement("script");
script.src = '组件js地址' + `?t=${Date.now()}`;
script.onload = () => {
const exportCom = window['件打包时—name参数'].default;
this.comName = exportCom;
};
document.body.appendChild(script);
这样我们就可以获取到远端的组件，再将该组件通过component动态组件进行渲染就可以了。是不是很简单呢？
<component :is="comName" ></component>
后记
我们在上文中介绍了自定义组件的开发、编译、远端引用、渲染的过程。有的小伙伴会问到，如何将自定义的组件和组件列表中自带的组件一样可进行属性配置呢？这里不详细的介绍实现方式，有想到答案的小伙欢迎留言讨论！有对该系列感兴趣的小伙伴可以来一波关注啦~
