iofod 导入任意前端资产，以 Element UI 为例

导入外部组件的功能千呼万唤始出来，iofod 提供了一个类微前端的组件容器，支持装载任意前端组件。官方更新的文档比较简练，不易于入门的同学上手，本文作为对官方文档的补充，将一步一步介绍如何在 iofod 导入外部组件。

一、组件功能开发

我们今天以 vite 和 element ui 来演示导入自定义组件到 iofod。先实现这么个小目标吧：在 iofod 里使用 Element UI。

在 iofod 中导入之前我们需要准备一些内容，如果同学在以前有使用过 vue 框架下导入组件的话，应该会十分熟悉。

首先，初始化工程模板，我们使用 vite 作为构建工具

框架选择 Vue

生成项目模板后，进入项目目录，安装 npm 依赖

安装 element-plus 依赖

接着，根据官网提示，修改 vite 配置来支持按需导入

安装下 unplugin-element-plus 依赖

接着修改 Vue 单文件组件，引入一个 el-button 组件到页面，去掉一些无关内容

导入 element UI 样式文件到全局

接着执行本地调试命令

查看效果，还不错

前面是基础的准备，假如我们组件的功能就开发到这儿结束，那么要怎么引入到 iofod 里呢？

二、导入到 iofod

Iofod 要求导入的外部组件必须是一个 ES 模块，模块暴露 setup 方法给 iofod 调用来初始化外部组件。

我们根据要求，把直接挂载 Vue 实例的这一行代码改造成通过 setup 传入挂载节点的模式：

接下来将组件打包，我们可以选择用 Vite 库模式的方式构建打包，也可直接打包，然后手动或通过脚本暴露 setup 方法，后者适用于不能用库模式打包的情况，读者可自行尝试，这里示范前一种，也是建议大家使用的方式。

我们修改 vite.config.js 文件，新增 lib 相关配置，设置 ES 格式

然后执行生产构建命令

开启本地静态服务器进行预览

接下来需要进入 iofod 编辑器，开启引入外部组件的功能特性，可参考官方文档：

https://doc.iofod.cn/#/zh-cn/3/09-1

开启特性后可在组件栏目看到一个【实验性】目录

我们拖动并添加一个外部组件到界面，根据我们打包生成的文件结构来配置外部组件。

比如我们的示例项目打包生成如下结构：

根据目录结构设定外部组件的模型变量以及外部依赖，

entry 模型变量的地址应该指向 dist/index.js，而 style.css 作为外部依赖。

设定完成后，即可看到组件导入到 iofod 的效果了

确认组件没问题后，可选择托管到云或者自己的服务器上

至此一个第三方组件导入 iofod 的流程就结束了。

好的又结束了，大伙们有没有学到新知识，别急着去应用，解决完外部组件的导入问题，想必大家也会肯定产生了几个疑惑：需要使用到多个外部组件怎么办？

接下来就是针对性讲优化部分的内容。

三、优化（可选）

假如我们同一个应用需要导入多个外部组件，这些组件使用类似的框架，比如都使用 Vue 和 Element UI，那么我们可以把他们两者抽离出来作为公共依赖。我们以之前例子的基础上继续示范。

根据 element 官网的提示，我们可以将 Vue 和 element UI 的样式文件作为公共依赖

一般情况下我们也不会用到 elementUI 所有组件，所以这里我们还是按需引入组件处理。

首先，安装 Vite 提取公共依赖的插件 vite-plugin-externals

接着修改 vite 配置文件，把 Vue 作为外部依赖：

后续的步骤跟前文接近，我们继续执行构建命令，然后开启预览

回到 iofod 编辑器，继续添加外部组件，添加 Vue 和 element UI 公共样式为外部依赖（同样地，可以用打包出来的 style.css 代替公共样式，取决于实际场景需要），根据打包出来的文件结构设定 entry 模型变量，即可看到导入效果

项目主页可查看：

https://www.iofod.cn/app/b80ee135aa36745800cbcfd4500d53a5/index.html#/index

示例代码可查看：https://github.com/iofod/iofod-exterior-demo

四、跑起来！

我们以刚才的公开项目示范，在本地跑起来！

如果还没安装 iofod-cli 工具，根据文档安装

新建一个项目，步骤与前文类似，安装依赖并开启本地调试，查看效果，不错！

导入外部组件的所有步骤到此为止，读者跟着操作一步一步来即可完成目标。

外部组件与原子组件差异化最大的地方在于跨平台性，外部组件一般是在 Web 端运行的，不兼容小程序（除非外部组件本身是支持的），flutter 则通过用 webview 的形式来兼容，一个外部组件就是一个 webview。

嘿嘿，机灵的读者朋友想必清楚个中意味，这里我通过一个小小的案例演示下。

比如我们通过 Echart Kit 拓展，添加一个三维折线图正交投影的图表到可视化编辑区：

通过 iofod-cli 创建一个 flutter 项目，进入工程目录，执行监听 5200 端口

借助 IFstruct 同步拓展和解析器生成 flutter 代码，在安卓/iOS 模拟器上开启调试，效果如下：

文件过大无法展示，可以去 gzh 查看

打完收工，更多的应用空间就留给大家去发挥了。

结语

再次强调一遍，外部组件可以是任意前端组件，甚至可以是一个应用！没有任何技术栈或者框架的限制。Iofod 作为新兴的通用低代码平台，当前社区组件资产的沉淀不算多，在社区完全成熟前，外部组件的引入可以作为一个很好的过渡方案，同时也是复用现有社区资产的解决方案，如前文提到的 Echart Kit 就是基于外部组件复用现有组件资产的最佳案例，当这些工具链串联起来，生产力超越传统编程是显而易见的事情，让我们一起见证！