前端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

相关推荐

  • 【前端】登录页面扩展点

    登录页面扩展点 场景 1: 登录之前需要二次确认框2: 前端默认的错误提示允许被修改3: 后端返回的错误提示允许被修改4: 登录后跳转到自定义的页面 方案 前端默认错误可枚举 errorMessages: { loginEmpty: '用户名不能为空', passwordEmpty: '密码不能为空', picCodeEmpty: '图形验证码不能为空', phoneEmpty: '手机号不能为空', verificationCodeEmpty: '验证码不能为空', picCodeError: '图形验证码错误', inputVerificationCodeAlign: '请重新输入验证码' } 登录按钮添加拓展点beforeClick、afterClick 代码 新增一个ts文件,继承平台默认的LoginPageWidget @SPI.ClassFactory(RouterWidget.Token({ widget: 'Login' })) export class CustomLoginPageWidget extends LoginPageWidget { constructor() { super(); // 修改前端默认的错误文案 this.errorMessages.loginEmpty = '登录用户名不能为空'; } /** * 用来处理点击「登录」之前的事件,可以做二次确定或者其他的逻辑 * 只有return true,才会继续往下执行 */ public beforeClick(): Promise<Boolean | null | undefined> { return new Promise((resolve) => { Modal.confirm({ title: '提示', content: '是否登录?', onOk: () => { resolve(true); } }); }); } /** * * @param result 后端接口返回的数据 * * 用来处理「登录」接口调用后的逻辑,可以修改后端返回的错误文案,也可以自定义 * * 只有return true,才会执行默认的跳转事件 */ public afterClick(result): Promise<any | null | undefined> { // if(result.redirect) { // 自定义跳转 //return false //} if (result.errorCode === 20060023) { result.errorMsg = '手机号不对,请联系管理员'; } return result; } }

    2023年11月1日
    93500
  • 【前端】项目开发前端知识要点地图

    概述 下面整理了目前现有的所有文章,并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。 目录 基础篇 【路由】浏览器地址栏url参数介绍 母版-布局-DSL 渲染基础(v4)* 组件SPI机制(v4)* 组件数据交互基础(v4)* 组件生命周期(v4) 入门篇 自定义视图组件(v4)* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的开发效率* 自定义组件之自动渲染(组件插槽的使用)(v4)* GraphQL请求详解(v4)* 上下文在字段和动作中的应用 如何实现页面间的跳转 如何自定义指定页面的样式 进阶篇 自定义组件之手动渲染基础(v4) 自定义组件之手动渲染弹出层(v4) 自定义组件之手动渲染任意视图(v4) 【前端】IOC容器(v4) 最佳实践篇 【前端】工程结构最佳实践(v4)* 【前端】移动端工程结构最佳实践(v4)* 界面设计器实战篇 基础篇 【界面设计器】模型增删改查基础 【界面设计器】他表字段 【界面设计器】左树右表 【界面设计器】树形表格 【界面设计器】树下拉/级联选择 【界面设计器】自定义字段组件基础 展示篇 【界面设计器】自定义字段组件实战——轮播图 【界面设计器】自定义字段组件实战——表格字段组合展示 【界面设计器】自定义字段组件实战——表格字段内嵌表格 交互篇 【界面设计器】自定义字段组件实战——千分位输入框 其他 前端低无一体使用教程 如何自定义表格字段? 【界面设计器】组件开发常见问题 【前端】低无一体部署常见问题 【前端】生产环境性能调优 API文档 OioProvider详解(v4.3.0)* 前端环境配置(v4)* 默认布局模板(v4) 表格主题配置(v4) 运行时上下文API文档(v4) Class Component(ts)(v4)

    2024年5月25日
    3.7K00
  • Oinone平台可视化调试工具

    为方便开发者定位问题,我们提供了可视化的调试工具。
    该文档将介绍可视化调试工具的基本使用方法。

    2024年4月13日
    96500
  • 【前端】低无一体部署常见问题

    如何检查上传的SDK是否有效? 1. 在任意页面刷新后,查看是否发起【查询SDK组件】的请求。 2. 在返回的js和css列表中是否能找到在界面设计器上传的js和css文件。 3. 检查浏览器的Console中是否有组件相关报错。 4. 检查sdk中是否包含了启动工程未加入的包依赖。 启动工程包依赖:main.ts VueOioProvider( { dependencies: { vue: import('vue'), lodashEs: import('lodash-es'), antDesignVue: import('ant-design-vue'), elementPlusIconsVue: import('@element-plus/icons-vue'), elementPlus: import('element-plus'), kunlunDependencies: import('@kunlun/dependencies'), kunlunVueUiAntd: import('@kunlun/vue-ui-antd'), kunlunVueUiEl: import('@kunlun/vue-ui-el') } } ); SDK依赖:rollup.config.ts const globals = { vue: 'vue', 'lodash-es': 'lodashEs', 'ant-design-vue': 'antDesignVue', '@element-plus/icons-vue': 'elementPlusIconsVue', 'element-plus': 'elementPlus', '@kunlun/dependencies': 'kunlunDependencies', '@kunlun/vue-ui-antd': 'kunlunVueUiAntd', '@kunlun/vue-ui-el': 'kunlunVueUiEl', '@kunlun/mobile-dependencies': 'kunlunMobileDependencies', '@kunlun/vue-ui-mobile-vant': 'kunlunVueUiMobileVant' }; 上述两个文件配置的依赖和对应名称必须匹配才能在sdk上传后正常运行,否则会出现内存变量无法共享的问题。 当未发起【查询SDK组件】的请求时如何处理? 1. 在任意页面刷新后,查看manifest.js加载路径。 业务工程通常为:http://${host}:${port}/manifest.js 设计器镜像中通常为:http://${host}:${port}/config/manifest.js 2. 若未正确加载manifest.js,则在dist目录中根据请求路径添加manifest.js文件。此文件称为运行时配置文件,可点击查看参考文档。 runtimeConfigResolve({ plugins: { usingRemote: true } });

    低无一体 2023年11月1日
    1.1K00
  • 左树右表默认选择第一行

    import { BaseElementWidget, Widget, SPI, ViewType, TableSearchTreeWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'tree', model: '改成当前视图的模型' }) ) export class CustomTableSearchTreeWidget extends TableSearchTreeWidget { protected hasExe = false; @Widget.Watch('rootNode.children.length') protected watchRootNode(len) { if (len && !this.hasExe) { this.hasExe = true; const firstChild = this.rootNode?.children?.[0]; if (firstChild) { this.onNodeSelected(firstChild); this.selectedKeys = [firstChild.key]; } } } }

    2024年11月26日
    1.0K00

Leave a Reply

登录后才能评论