Mojito是一个低代码，可视化，可扩展开发平台

🔥特性

• 点选、拖拽、缩放的可视化操作
• 群组/解散、撤销/重做、图层显示/隐藏、锁定/解锁、对齐和排序
• 支持使用React和Vue3自定义组件库
• 支持组件间样式隔离
• 组件样式可视化配置
• 组件间通讯、事件同步、动态脚本...

👆🏼 事件同步

✨ 组件通讯

🧪 测试组件库

Antd

http://mojito.drinkjs.com/public/[email protected]/mojito-pack.json

Echarts

http://mojito.drinkjs.com/public/[email protected]/mojito-pack.json

Element

http://mojito.drinkjs.com/public/[email protected]/mojito-pack.json

🗄️ 后端代码

https://github.com/drinkjs/mojito-server

https://gitee.com/drinkjs/mojito-server

📦 组件开发

npx create-mojito-pack

定义组件

<template>
	<div>{{ text }}</div>
</template>

<script lang="ts">
import { CreatePack } from "@drinkjs/mojito-vue-pack";
import { defineComponent } from "vue";

// 常规vue组件定义
const Text = defineComponent({
	props: {
		text: String,
	},
});

export default Text;

// 定义Mojito组件
export const PackText = CreatePack(Text, {
	name: "文本", // 组件的名称
	category: "基础组件", // 组件分类
    // 组件props定义
	props: {
		text: {  // 对应vue中props中的定义
			name: "文字", // 属性名称
			type: "string", // 属性类型
			default: "这里显示文本...", // 默认值
		},
        ... // 更多属性
	},
});
</script>

编译组件库

mojito build

平台添加组件库

🔩 系统组件库

https://github.com/drinkjs/mojito-pack

📄 文档

http://mojito.drinkjs.com/document

👓 演示

http://mojito.drinkjs.com

🚀 未来

• 更好的开发体验
• 3D 编辑器
• 动画编辑器
• 组件市场
• 原形图生成可编辑页面
• ...

技术交流