zc-lowcode

Vue 3 可视化页面搭建 SDK。提供 设计器 与 运行时 两套入口，共享同一套 Page 协议与物料协议，可快速嵌入你的业务系统。

简单易用，灵活扩展，完全自定义。

亮点

| | | | -------------- | ------------------------ | | 易用 | 拖拽可视化，开箱即搭 | | 可扩展 | 物料、脚本、API 自由接入 | | 完全自定义 | 样式、逻辑、事件尽在掌控 |

核心能力

设计器 + 运行时
同一套 Page JSON 在设计态编辑、在运行态渲染，保存与预览无需二次转换。

可扩展物料体系
通过 defineMaterial 在宿主项目中注册业务组件，无需修改 SDK 源码。

页面脚本能力
支持页面数据、自定义函数、生命周期、API 模板与组件事件绑定。

样式与动画
多态样式、过渡与关键帧动画可在属性面板可视化配置，并支持脚本触发。

内置物料

容器与基础组件已内置，也支持扩展业务物料：

grid 容器 · card 卡片 · tab 标签页 · carousel 走马灯 · list 列表 · button 按钮 · image 图片 · text 文本 · divider 分割线

安装

npm install zc-lowcode

依赖：vue ^3.5（peer）。

快速开始

<script setup lang="ts">
import { LowcodeDesigner, createDefaultPage } from 'zc-lowcode/designer'
import { materialDefinitions } from 'zc-lowcode/materials'
import 'zc-lowcode/style/designer'

const page = ref(createDefaultPage())
</script>

<template>
  <LowcodeDesigner v-model:page="page" :definitions="materialDefinitions" />
</template>

文档

完整接入说明、协议定义、页面脚本与内置组件用法，请参阅仓库 http://www.zc-lowcode.com/docs 。

仓库

Gitee · npm