easy-lowcode

🔥 最简单的低代码实现

技术栈： React18 + Zustand + Vite + codeMirror + Koa2（后期将改用nestjs）

1. 实现拖拽生成组件代码的json描述的页面 √
2. 物料区、编辑区、画布区 √
3. 编辑器通信 √
4. 支持生成不同框架源代码(出码) √
5. 服务端koa2构建生成源码 √
6. H5移动端生成适配 √
7. 支持sdk加载页面，renderer解析 √
8. iframe隔离 postMessage 通信 √
9. 封装editor包 ×
10. 预览二维码 ×
11. 生产低代码组件 ×
12. 大纲树 ×
13. 低代码通信 ×
14. 自定义事件中心 ×
15. 完整的生产页面并部署 ×

📀 Preview

easy-lowcode

📈 Article

简单5分钟，将lowcode低代码融入到你的中后台管理系统
我的低代码框架是如何生成源码的？
实不相瞒，看完你也能手撸一个低代码框架

Quick Start

pnpm dev
pnpm run server

How to use SDK

pnpm renderer   // 生成sdk

画布区的iframe是为了与编辑器解耦实现隔绝的上下文。生成sdk后，我们可以在sdk.html中默认通过public静态资源被外部访问，然后在options.ts修改对应iframeURL，在编辑器的navbar切换iframe加载。

Error Resolution

extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. at inner (index.js:2017:23)

依赖兼容问题，请删除lock、node_modules, 然后重新安装依赖即可解决