🚀 被迫认识低代码 之 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;
      }
    }

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

4️⃣ 实际开发复杂组件

  • 支持使用第三方库(如 Ant Design Vue)
  • 'BMDX' 主要是用在拖拉拽中注册使用,请大家忽略我的命名规范问题
  • 👉 后续计划继续研究并分享 M2O / O2M 等等特性。(挖下第二个坑)

🧾 小结一下

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

  • 开发准备:明确 Node.js 版本 & 仓库来源,保证环境一致。
  • 项目结构:多包管理,让通用与私有组件分离,便于复用与治理。
  • 组件开发:TS + 装饰器方式组织逻辑,Vue 负责展示与交互。
  • 复杂场景:可灵活调用子组件、引入第三方库,但要关注继承关系。
相关推荐
zzywxc7871 天前
AI 开发工具全景指南:从编码辅助到模型部署的全流程实践
大数据·人工智能·低代码·机器学习·golang·自动化·ai编程
canonical_entropy4 天前
从“华丽的诡辩”到“构造的第一性原理”:我如何误解并最终拥抱广义可逆计算
人工智能·后端·低代码
得帆云低代码4 天前
低代码走向“全民开发”的四个关键要素
低代码
低代码布道师4 天前
少儿舞蹈小程序(19)地址列表功能实现及默认地址逻辑
前端·低代码·小程序
canonical_entropy5 天前
一份关于“可逆计算”的认知解码:从技术细节到哲学思辨的完整指南
后端·低代码·deepseek
Insight-n5 天前
低代码数字化时代的开发新范式
低代码·ai
麦聪聊数据7 天前
企业级数据库管理实战(七):SQL 到 API,让数据库成为团队的数据服务
数据库·sql·低代码·数据服务
allanGold7 天前
【低代码】百度开源amis
低代码·amis
阿三08127 天前
低代码+AI生态:企业数字化起步阶段的“核聚变”冲击波
人工智能·低代码
低代码布道师7 天前
少儿舞蹈小程序(18)订单确认
低代码·小程序