Мохито — это низкокодовая, визуальная и расширяемая платформа для разработки

🔥 Особенности

• Визуальные операции: выделение, перетаскивание, масштабирование.
• Группировка / расформирование, отмена / повторение, отображение / скрытие слоёв, блокировка / разблокировка, выравнивание и сортировка.
• Поддержка использования пользовательских библиотек компонентов React и Vue3.
• Поддержка изоляции стилей между компонентами.
• Визуальная настройка стилей компонентов.
• Синхронная передача событий и динамические сценарии между компонентами...

👆🏼 Синхронная передача событий

✨ Коммуникация между компонентами

🧪 Тестирование библиотек компонентов

Antd

http://mojito.drinkjs.com/public/mojito-antd@1.0.0/mojito-pack.json

Echarts

http://mojito.drinkjs.com/public/mojito-echarts@1.0.0/mojito-pack.json

Element

http://mojito.drinkjs.com/public/mojito-element@1.0.0/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-редактор.
• Редактор анимации.
• Маркетплейс компонентов.
• Генерация интерактивных страниц из прототипов.
• ...

Техническое общение