❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

原文链接：https://mp.weixin.qq.com/s/t15Ar0KuDIVO1PiInt1c3w

🚀 快速阅读

1. 功能：提供拖拽、配置等简单操作，快速构建复杂系统页面。
2. 技术：基于 TypeScript 开发，支持组件化、数据绑定和模板引擎。
3. 生态：提供丰富的物料体系、设置器和插件，支持全链路研发周期。

正文（附运行示例）

LowCodeEngine 是什么

LowCodeEngine 是阿里巴巴开源的低代码开发框架，旨在通过拖拽、配置等简单操作，帮助开发者快速构建复杂的系统页面。该框架以强大的定制能力、优雅的开发体验、丰富的 API 和插件支持而著称，能够满足各种复杂的业务场景需求。

LowCodeEngine 基于 TypeScript 开发，支持物料体系、设置器、插件等生态元素的全链路研发周期，极大地提升了开发效率和质量。其设计理念是最小内核、最强生态，能够支撑多种类型的低代码平台。

LowCodeEngine 的主要功能

• 内核引擎：提炼自企业级低代码平台，奉行最小内核、最强生态的设计理念。
• 高质量生态元素：提供开箱即用的生态元素，包括物料体系、设置器、插件等。
• 工具链支持：完善的工具链，支持生态元素的全链路研发周期。
• 扩展能力：强大的扩展能力，已支撑 100+ 个各种类型的低代码平台。
• TypeScript 开发：基于 TypeScript 开发，提供完整的类型定义文件。

LowCodeEngine 的技术原理

• 组件化开发：基于组件化开发，组合不同的组件构建页面和应用。
• 数据绑定：支持数据绑定，实现 UI 组件与数据模型的同步和动态更新。
• 模板引擎：用模板引擎渲染页面，提高开发效率和页面性能。
• 物料体系：提供预制的 UI 组件和模板，加速开发流程。
• TypeScript 支持：基于 TypeScript 的类型系统提高代码质量和开发体验。

如何运行 LowCodeEngine

首先，安装 LowCodeEngine 的 npm 包：

npm install @alilc/lowcode-engine --save-dev

然后，通过 CDN 引入 LowCodeEngine 的核心文件：

<script src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js"></script>
<script src="https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js"></script>

接下来，初始化 LowCodeEngine：

import {
    init, skeleton } from '@alilc/lowcode-engine';

skeleton.add({
   
  area: 'topArea',
  type: 'Widget',
  name: 'logo',
  content: YourFantasticLogo,
  contentProps: {
   
    logo: 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
    href: '/',
  },
  props: {
   
    align: 'left',
    width: 100,
  },
});

init(document.getElementById('lce'));

资源

• 项目官网：http://lowcode-engine.cn/
• GitHub 仓库：https://github.com/alibaba/lowcode-engine
• Demo 示例：http://lowcode-engine.cn/demo
• 官方材料：https://github.com/alibaba/lowcode-materials
• 用户文档：http://lowcode-engine.cn/doc

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦