介绍

Leivii Editor 是什么

Leivii 是一个专注于前端低代码的在线IDE。与其他流行的表单/大屏/工作流低代码不同的是，Leivii被设计为二次开发友好的通用框架。Leivii抽象简单，不仅易于上手，还便于与第三方库或既有项目整合；另一方面，借助组件交互处理器的设计，用户可以像做游戏一样，实现复杂的应用交互。

如果你想在深入学习 Leivii 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念。

./assets/video/leivii.mp4

为什么叫 Leivii ？

Leivii，读作“雷卫”，来自《星辰变》

起步

安装

尝试Leivii最简单的方法是使用 Hello World 例子。你可以打开下面的代码示例，查看配置，学习一些基础用法；或者选择在编辑器中打开，在弹出的编辑器中了解更多。

安装教程给出了详细的安装 Leivii 的方式。你也可以通过阅读下面的教程，先来了解一下编辑器的核心概念。

组件

在 Leivii 中，组件为最小的操作单位。我们以组件的三大特征为核心抽象，构建了 Leivii 的核心：

1、属性：即组件的 props，对应编辑器的属性面板。

2、方法：即组件对外提供的功能。

3、事件：即组件完成本身功能后，抛出的事件消息。

其中2、3是 处理器 的基础。

DSL

DSL，是基于 JSON 的外部领域特定语言，包含了页面的组件树、数据和交互的配置。借助 Leivii 编辑器，我们通过可视化方式，即可完成复杂的业务逻辑。

下面我们实现一个典型后端管理页面的示例，首先拖入搜索框、表单、表格。 选中表格，在右侧配置面板中，打开 自适应宽 和 分页。

数据源

数据源包括组件数据源和数据模型。详情请移步 数据源。

接下来，我们为已有组件配置数据。

配置表格

点击表格组件，在右侧配置区域选中数据源，配置如下：

./assets/img/datasource-1.png

点击 创建数据模型 按钮，输入模型名称“表格”，完成模型创建。在左侧数据模型标签页中，完善对字段的描述，示例如下：

./assets/img/datasource-2.png

切换至表格属性面板，在 列 属性栏选择 配置列，在列配置弹窗中选择需要的字段，效果如下：

./assets/img/column-config.png

配置完成后，表格的列就能正常显示了！

配置搜索表单

选中表单，在属性面板的 子节点 栏，选择 配置表单项，在配置弹窗中选择需要的字段。选择 列数 栏，输入3，间隔 输入30。

状态字段是字典值，包含“启用”和“禁用”，在表单和表格中均有使用。我们点击页面空白处，选中页面组件（数据源自节点向下共享），在右侧配置面板中选择数据源，添加自定义数据如下所示：

./assets/img/datasource-3.png

表单详细配置

处理器

处理器，配置组件的交互逻辑。

打开 搜索框 配置面板的处理器标签，在提交卡片中，点击 添加处理器，选择表格组件，选择 获取数据方法，即完成了提交的交互功能。

同样的方式，我们配置好搜索的重置操作，这样，一个简单的后端页面就配置完成了！

准备好了吗？

我们刚才简单介绍了 Leivii 核心最基本的功能——本教程的其余部分将更加详细的涵盖这些功能以及其它高级功能，所以请务必读完整个教程！