用过宜搭、云枢，今天公司突然决定上马 Oinone，我这个前端不得不临时‘补课’这个低代码平台。
刚开始一脸懵，后来才发现只要理清组件注册、使用规则，再结合常用的 Vue，其实二开体验并不难。
这篇文章记录了我踩坑和实践的全过程，希望能帮到同样在 Oinone 上折腾的你。

---

1️⃣ 开发准备

Node.js

• 官方直接展示使用：v20.16.0

项目代码

• 开源版：拉取官方示例仓库（前端 oinone-frontend-*-tutorials，后端 oinone-backend-*-tutorials）
• 企业版：找公司对接人要

    git clone https://github.com/oinone/oinone-frontend-starter.git

    # Clone with SSH
    git clone git@github.com:oinone/oinone-frontend-starter.git

• 或者直接去 Gitee 仓库
  https://gitee.com/oinone

---

2️⃣ 探索一下 Oinone 前端项目

项目结构

• 使用 多包管理，区分通用组件与私有组件
• 值得在常规开发中借鉴，后续计划单独写一篇笔记（开心的挖下第一个坑）

核心组件

• Mask（母版） ：页面框架（顶部栏 / 侧边栏）
• Layout（布局） ：某类视图的内容分区（如表格视图主区域）
• Element（组件） ：真正的可视化元素（按钮、卡片、图表）

💡 个人理解：相当于向二次开发人员开放了 6 个接口，自定义组件后按类型存放、替换

---

3️⃣ 官方的案例：计数器

组件开发与注册

• 常规 Vue + TS 开发
• 通过 props 获取 TS 文件中的方法
• 采用类的方式写组件，区别于常规 Vue 编码
• 需注意：别漏掉 @Widget.* 装饰器

示例（vue 文件）：

示例（TS 文件）：

    #TS文件
    import { BaseElementWidget, SPI, Widget } from '@oinone/kunlun-dependencies';
    import Counter from './Counter.vue';

    @SPI.ClassFactory(
      BaseElementWidget.Token({
        widget: 'Counter'
      })
    )
    export class CounterWidget extends BaseElementWidget {
      public initialize(props) {
        super.initialize(props);
        this.setComponent(Counter);
        return this;
      }

      // 导入value
      @Widget.Reactive()
      public value: number = 0;


      // 导入方法
      @Widget.Method()
      public onIncrement() {
        this.value += 1;
      }
    }

最后需 注册组件，即可在平台内调用。

4️⃣ 实际开发复杂组件

• 支持使用第三方库（如 Ant Design Vue）

• ‘BMDX’ 主要是用在拖拉拽中注册使用，请大家忽略我的命名规范问题

• 👉 后续计划继续研究并分享 M2O / O2M 等等特性。（挖下第二个坑）

🧾 小结一下

这篇笔记的目标是 快速上手 Oinone 前端开发：

• 开发准备：明确 Node.js 版本 & 仓库来源，保证环境一致。
• 项目结构：多包管理，让通用与私有组件分离，便于复用与治理。
• 组件开发：TS + 装饰器方式组织逻辑，Vue 负责展示与交互。
• 复杂场景：可灵活调用子组件、引入第三方库，但要关注继承关系。