LowcodeEngine实战-VueRenderer+vite搭建应用级别预览

背景

我们基于LowcodeEngine做了一个低代码平台,支持选择React和Vue框架。今天介绍一下选择Vue框架下的应用预览和调试功能。 Vue画布采用的是社区的LowcodeEngineVue,我们的低代码应用设计器是应用级别的,但是LowcodeEngine和LowcodeEngineVue给出的demo都是页面级别的预览。这种限制在涉及到页面切换等页面之间有交互的时候变得非常突出。所以我们决定将单页面预览调试进行升级提升至应用级别的预览调试。

方案

使用vite搭建一个新的vue项目,在这个项目中采用动态路由的方式,将各个低代码页面无缝的集成到当前项目的路由系统重,从而实现基于路由的应用界别预览功能。低代码应用涉及的其他资源也通过动态添加的方式加载到这个项目中来。

实现

使用vite创建一个Vue3的模版项目。

这个就直接用vite脚手架创建就行了,这里直接跳过。

添加vue-router及lowcode-vue-renderer相关和其他项目依赖

添加vue-router、lowcode-vue-renderer、lowcode-utils依赖。根据自己项目添加其他所需要的依赖。

VueRenderder组件封装成route使用。

为了让VueRenderder组件更好的融入路由系统,将其封装成route形式,并通过props将 将schema及components等相关资源传入VueRenderer组件中

通过动态添加的方式注册到应用路由上。

最后通过router.addRoute方法将这些route动态添加到应用路由系统上,实现应用界别的预览。

问题

Vue is not defined

低代码物料和VueRenderer打包的都配置了使用全局的Vue对象,所以在我们的项目中要配置一个全局的Vue对象。打包排除Vue依赖,通过cdn引入全局Vue对象。

效果

我们在低代码应用设计器中画了三个页面(main、page1、page2)。main页面中通过两个按钮切换路由来展示main下的page1和page2页面。main页面下有个route组件,用来展示page1和page2。将这个低代码应用设计器中产出物导入到预览应用项目下就实现了应用界别的调试和预览,这样在低代码设计器中就只是设计模式(不触发低代码物料的点击等事件,提升用户体验)

最后

关于调试还没有找到好的表现形式,当前还是按照逻辑编排的执行顺序打印的日志。 未来可能会将日志和流程图统一起来,逻辑编排是基于流程图的。进入到调试后执行基于流程图编排的逻辑,在流程图中可视化的展示逻辑执行到了哪里,点击具体逻辑查看执行日志。

本文正在参加阿里低代码引擎征文活动

相关推荐
独立开阀者_FwtCoder4 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
LucianaiB43 分钟前
百度开源文心4.5系列开源21款模型,实测 ERNIE-4.5-VL-28B-A3B-Paddle 多项评测结果超 Qwen3-235B-A22B
百度·开源·文心大模型·paddle·gitcode
popeye0081 小时前
免费开源 RPA 软件困境与 tdRPA 的创新破局
开源·rpa
初九之潜龙勿用1 小时前
文心一言4.5开源模型测评:ERNIE-4.5-0.3B超轻量模型部署指南
开源·dubbo·文心一言
NetX行者1 小时前
FastMCP:用于构建MCP服务器的开源Python框架
服务器·python·开源
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端