前端6.2.x升级指南

升级背景

从 6.2.x 版本开始,平台底层核心代码已全面开源(设计器相关代码除外),本次升级涉及包名变更和配置调整,以下是详细的升级步骤

1. 更新 .npmrc 配置

修改当前项目根目录 .npmrc 文件,内容如下:

registry=https://registry.npmmirror.com/
@oinone:registry=http://nexus.shushi.pro/repository/kunlun/
@kunlun:registry=http://nexus.shushi.pro/repository/kunlun/
shamefully-hoist=true
legacy-peer-deps=true
link-workspace-packages = true
prefer-workspace-packages = true
recursive-install = true
lockfile=true

2. 包名变更

以前的包是 @kunlun/xxxx,现在的包名是@oinone/kunlun开头,所以需要全部替换修改。

旧包名 新包名
@kunlun/dependencies @oinone/kunlun-dependencies
@kunlun/vue-ui-antd @oinone/kunlun-vue-ui-antd

3. 升级依赖版本

修改所有 package.json 中更新所有平台相关依赖:

- "@kunlun/dependencies": "~5.7.0"
+ "@oinone/kunlun-dependencies": "~6.2.0"

boot工程的package.json新增devDependencies依赖

"devDependencies": {
    "@types/lodash": "4.14.182",
    "@types/lodash-es": "4.17.6",
    .....
  }

4. 更新代码引用

全局搜索并替换代码中的所有 @kunlun/ 为 @oinone/kunlun-

完整的 main.ts

import 'ant-design-vue/dist/antd.min.css';
import 'element-plus/dist/index.css';

import '@oinone/kunlun-vue-ui-antd/dist/oinone-kunlun-vue-ui-antd.css';
import '@oinone/kunlun-vue-ui-el/dist/oinone-kunlun-vue-ui-el.css';

import '@oinone/kunlun-designer-common/dist/oinone-kunlun-designer-common.css';
import '@oinone/kunlun-model-designer/dist/oinone-kunlun-model-designer.css';
import '@oinone/kunlun-workflow-designer/dist/oinone-kunlun-workflow-designer.css';
import '@oinone/kunlun-workflow/dist/oinone-kunlun-workflow.css';
import '@oinone/kunlun-data-designer/dist/oinone-kunlun-data-designer.css';
import '@oinone/kunlun-microflow-designer/dist/oinone-kunlun-microflow-designer.css';

import 'reflect-metadata';
import ElementPlus from 'element-plus';
import { App } from 'vue';
import { VueOioProvider, RuntimeContextManager } from '@oinone/kunlun-dependencies';

// 设计器
import '@oinone/kunlun-ui-designer-dependencies';
import '@oinone/kunlun-print-designer-dependencies';
import '@oinone/kunlun-workflow';
import '@oinone/kunlun-workflow-designer';
import '@oinone/kunlun-model-designer';
import '@oinone/kunlun-data-designer';
import '@oinone/kunlun-data-designer-open-pc';
import '@oinone/kunlun-eip-dependencies';
import '@oinone/kunlun-ai-dependencies';
import '@oinone/kunlun-microflow-designer';
import '@oinone/kunlun-designer-common-ee';

// 下面三个依赖是当前工程的包,请根据实际场景修改
import '@ss/oinone';
import '@ss/admin-widget';
import '@ss/project';

VueOioProvider(
  {
    browser: {
      title: 'Oinone - 构你想象!',
      favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico'
    }
  },
  [
    () => {
      /// 获取当前vue实例
      const app = RuntimeContextManager.createOrReplace().frameworkInstance as App;
    }
  ]
);

当配置全部修改完成后,重写安装依赖

# 清理旧依赖
pnpm clean

# 安装新依赖
pnpm install

Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/21257.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(1)
汤乾华的头像汤乾华数式员工
上一篇 2025年6月9日 pm11:32
下一篇 2025年6月20日 pm6:42

相关推荐

  • 前端-如何修改指定页面的内组件的css样式

    为组件加自定义class,用该class作为父选择器写特定的css样式 以form为例,自定义了以下class <view/>标签的表单视图(FormView)组件 <element/>标签的form(FormWidget)组件 <element/>标签的actionBar(ActionBarWidget)组件 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <view type="FORM" class="my-form-view"> <element widget="form" slot="form" class="my-form-widget"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" class="my-action-bar" slotSupport="action" > <xslot name="actions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Form, model: 'resource.k2.Model0000000109', actionName: 'uiViewb2de116be1754ff781e1ffa8065477fa' } ); }; install(); 查看修改后的页面html结构 编写样式的css .my-form-view .oio-form { /** TODO **/ } .my-form-widget .oio-row { /** TODO **/ } .my-action-bar .oio-col { /** TODO **/ }

    2024年6月17日
    75000
  • 树型表格全量加载数据如何处理

    阅读该文档的前置条件 【界面设计器】树形表格 1.前端自定义表格组件 import { ActiveRecord, BaseElementWidget, Condition, Entity, SPI, TableWidget, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: ['demo-tree-table'] }) ) export class TreeTableWidget extends TableWidget { // 默认展开所有层级 protected getTreeExpandAll() { return true; } // 关闭懒加载 protected getTreeLazy(): boolean { return false; } public async $$loadTreeNodes(condition?: Condition, currentRow?: ActiveRecord): Promise<Entity[]> { // 树表加载数据的方法,默认首次只查第一层的数据,这里去掉这个查询条件的参数condition,这样就会查所有层级数据 return super.$$loadTreeNodes(undefined, currentRow); } } 2. 注册layout import { registerLayout, ViewType } from '@kunlun/dependencies'; const install = () => { registerLayout( ` <view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="demo-tree-table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Table, model: "resource.resourceCity", // 变量,需要替换 actionName: "MenuuiMenu6f6005bdddba468bb2fb814a62fa83c6", // 变量,需要替换 } ); }; install();

    2024年8月17日
    73000
  • 移动端5.0.x启动、打包代码报错

    在5.0.x版本中,移动端mobile-base包是源码开放的,所以项目在启动的时候可能会报错,请按照下面的步骤修改。 打开boot工程中的package.json "dependencies"中添加 "lodash-es": "4.17.21" "devDependencies"中添加 "@types/lodash-es": "4.17.12" 在main.ts中删除 import '@kunlun/vue-mobile-base/dist/kunlun-vue-mobile-base.css'

    2024年7月17日
    1.1K00
  • 如果让表单支持单选 ?

    本文将介绍在代码和XML配置中的修改,支持表格的单选功能。 先自定义一个widget,继承平台默认的table @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MyRadioTable' }) ) export class MyRadioTable extends TableWidget { @Widget.Reactive() protected get selectMode(): ListSelectMode { return ListSelectMode.radio; } } 注册layout 如果当前是主表格,那么xml配置如下 const xml = `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyRadioTable" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <element widget="RadioColumn" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view>` registerLayout(xml, { moduleName: '模块名称', model: '模型', viewType: ViewType.Table }) 如果当前的表格是form表单页面的表格,那么xml配置如下 const xml = `<view type="TABLE"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyRadioTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <element widget="RadioColumn" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" /> </element> </view>` registerLayout(xml, { moduleName: '模块名称', model: '模型', viewType: ViewType.Table })

    2023年11月27日
    59500
  • 如何通过浏览器开发者工具提高调试效率

    1.通过vue devtool查看vue组件和oinone组件的信息 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址,隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后,可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名,据此特性可以得出自定义组件的时候,可继承该命名的父类 一般oinone的组件以Widget后缀命名,也推荐大家也以此为后缀,方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息,部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具,进入标签页源代码/来源(英文版为Source),win系统用快捷键ctrl+O,mac系统用快捷键cmd+O, 可以打开文件搜索面板,通过关键字搜索文件名找到代码文件,可直接在里面debug调试或者查看执行逻辑

    2024年9月9日
    80900

Leave a Reply

登录后才能评论