跨项目渲染

跨项目渲染时可能出现组件无法渲染问题，本文提供完整解决方案。

找到渲染器打包入口文件

高级版设计器在开源版渲染器基础上扩展了功能，并导入了一些组件。

element-plus/element-ui 版本对应:

/src/form/elm.js

ant-design-vue 版本对应:

/src/form/antdv.js

移动端版本对应:

/src/form/mobile.js

挂载组件

将自定义扩展组件导入上述文件并完成挂载，具体操作可参考示例组件。例如导入扩展组件中的示例组件

注意：

1.若表单依赖全局方法或变量，需在目标项目中同步定义对应依赖。

2.自定义组件和打包文件中禁止使用框架全局方法，避免跨项目迁移时功能失效。

//导入组件
import Title from 'Title.vue';
import Input from 'Input.vue';


//挂载组件
formCreate.component('Title', Title);
formCreate.component('FcInput', Input);

更新渲染器版本

element-plus/element-ui

npm update @form-create/element-ui

ant-design-vue

npm update @form-create/ant-design-vue

移动端

npm update @form-create/vant

重新打包渲染器

在设计器项目根目录执行打包命令

element-plus/element-ui

npm run build:elm

ant-design-vue

npm run build:antdv

移动端

npm run build:mobile

打包后的渲染器会在 dist/render 目录下

跨项目使用

1. 将dist/render目录下对于的渲染器复制到目标项目中,例如复制到src/libs 目录下
2. 替换开源版渲染器,例如:

import formCreate from "@form-create/element-ui"

替换为

import formCreate from "src/libs/form-create.es"