🚀 被迫认识低代码之 Oinone上手二开前端组件

"领导让我试试用 Oinone 开发，于是我有了这篇笔记。"

一来希望自己养成记录习惯，二来规避反复踩坑过程，三来希望对后续要用到此平台的朋友有帮助

1️⃣ 开发准备

Node.js

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

项目代码

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

bash 复制代码

    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 文件）：

typescript 复制代码

    #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;
      }
    }

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