基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

news2025/3/16 16:15:03

      因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、package.json文件需要增加相关流程组件,如下

"dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@highlightjs/vue-plugin": "^2.1.2",
    "@vueup/vue-quill": "1.2.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "5.1.10",
  
    "bpmn-js": "^8.10.0",
    "bpmn-js-task-resize": "^1.2.0",
    "bpmn-js-token-simulation": "^0.10.0",
    "codemirror-editor-vue3": "^2.4.1",
    "element-plus": "^2.5.6",
    "path-browserify": "^1.0.1",
    "path-to-regexp": "^6.2.1",
    "qs": "^6.11.2",
3.1.0",
    "xe-utils": "3.5.14",
    "xml-js": "1.6.11",
  },

2、建立专门的flowable注册组件文件 registerFlowableComp.ts

//注册flowable相关组件 add by nbacheng
import ElementPlus from 'element-plus';
import locale from 'element-plus/es/locale/lang/zh-cn'; // 中文语言
import 'element-plus/theme-chalk/dark/css-vars.css';
import ElementIcons from '@/plugins/svgicon';

import VForm3 from '@/lib/vform/designer.umd.js';
import '@/lib/vform/designer.style.css';

// 高亮highlightjs
import 'highlight.js/lib/common';
import 'highlight.js/styles/atom-one-dark-reasonable.css';// 引入内置样式
import highlightPlugin from "@highlightjs/vue-plugin";
// add by nbacheng

export async function registerFlowableComp(app: App) {
  app.use(ElementIcons);
  app.use(VForm3);
  app.use(highlightPlugin);
  // 使用element-plus 并且设置全局的大小
  app.use(ElementPlus, {
    locale: locale
  });
}

3、main.ts修改如下:

import App from './App.vue';
import { createApp } from 'vue';
import { initAppConfigStore } from '/@/logics/initAppConfig';
import { setupErrorHandle } from '/@/logics/error-handle';
import { router, setupRouter } from '/@/router';
import { setupRouterGuard } from '/@/router/guard';
import { setupStore } from '/@/store';
import { setupGlobDirectives } from '/@/directives';
import { setupI18n } from '/@/locales/setupI18n';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { registerFlowableComp } from '/@/settings/registerFlowableComp';
import { registerThirdComp } from '/@/settings/registerThirdComp';
import { useSso } from '/@/hooks/web/useSso';
// 注册online模块lib
import { registerPackages } from '/@/utils/monorepo/registerPackages';

import 'uno.css';
import '/@/design/index.less';
import 'ant-design-vue/dist/reset.css';

// 注册图标
import 'virtual:svg-icons-register';

async function bootstrap() {
  // 创建应用实例
  const app = createApp(App);
  
  // 多语言配置,异步情况:语言文件可以从服务器端获得
  await setupI18n(app);

  // 配置存储
  setupStore(app);

  // 初始化内部系统配置
  initAppConfigStore();

  // 注册外部模块路由(注册online模块lib)
  registerPackages(app);

  // 注册全局组件
  registerGlobComp(app);
  
  //CAS单点登录
  await useSso().ssoLogin();

  // 配置路由
  setupRouter(app);

  // 路由保护
  setupRouterGuard(router);

  // 注册全局指令
  setupGlobDirectives(app);

  // 配置全局错误处理
  setupErrorHandle(app);
  
  //注册flowable组件
  await registerFlowableComp(app);

  // 注册第三方组件
  await registerThirdComp(app);

  // 当路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
  await router.isReady();

  // 挂载应用
  app.mount('#app', true);

  console.log(" vue3 app 加载完成!")
}

bootstrap();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1694931.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JDBCTemplate介绍

Spring JDBC Spring框架对Spring的简单封装。提供一个JDBCTemplate对象简化JDBC开发 *步骤: 1、导入jar包 2、创建JDBCTemplate对象。依赖于数据源DataSource *JdbcTemplate templatenew JdbcTemplate(ds); 3、调用JdbcTemplate的方法来完成CRUD的操作 *update()&…

解决问题:Collecting package metadata (current_repodata.json)--faile

目录 解决步骤: 1、创建pip.ini文件:winR对话框中复制输入:%APPDATA%,然后回车。 2、conda添加清华源: 3、这些创建完,重启电脑就可以创建你的虚拟环境了 4、利用镜像源下载库: 5、查看to…

青鸟云报修系统:实现高效、便捷的维修申请处理

在日常生活和工作中,故障报修难免会遇到,售后报修服务则成为了解决问题的关键。纸质化售后报修维修申请单,作为报修流程中的重要一环,在一定程度上能够记录和追踪售后报修维修流程,但在实际操作过程中却存在着诸多弊端…

C# NetworkStream 流的详解与示例

文章目录 一、NetworkStream类的基本概念1.1 NetworkStream类概述1.2 NetworkStream类属性1.3 NetworkStream类方法 二、NetworkStream的连接方式三、NetworkStream的传输模式四、NetworkStream类示例服务器端代码:客户端代码: 五、总结 在C#中&#xff…

代码审计--一道简单的文件包含题目的多种利用方式

NO.1 传统方法 首先来看下代码 <?php error_reporting(0); if(isset($_GET["file"])){include($_GET["file"]); }else{highlight_file(__FILE__);phpinfo(); } ?>看完代码后再来学习学习函数吧&#xff0c;毕竟菜啊&#xff01;&#xff01;&…

webpack编译过程

webpack编译过程 初始化 此阶段&#xff0c;webpack会将**CLI参数**、**配置文件**、**默认配置**进行融合&#xff0c;形成一个最终的配置对象。​ 对配置的处理过程是依托一个第三方库yargs完成的 ​ 此阶段相对比较简单&#xff0c;主要是为接下来的编译阶段做必要的准备 ​…

那智不二越机器人维修案例分享

那智不二越工业机器人在工业范围内广泛应用于各种生产领域。其示教器作为人机交互的重要设备&#xff0c;常常需要定期维护和Nachi不二越机械手示教盒修理。 【Nachi不二越机器人示教器维修步骤】 1. 关闭电源 在进行任何那智不二越机器人维修操作之前&#xff0c;务必确保机器…

arc-eager算法XJTU-NLP自然语言处理技术期末考知识点

arc-eager算法&#xff1a;以我/做了/一个/梦为例来描述arc-eager算法的四个操作&#xff1a;shift&#xff0c;left-arc&#xff0c;right-arc&#xff0c;reduce XJTU-NLP期末考点2024版 题型&#xff1a;5*6简答题4*15计算题 简答题考点&#xff1a; &#xff08;1&#…

总结 HTTPS 的加密流程

一、前言 http是为了解决http存在的问题而在http基础上加入了SSL/TSL&#xff0c;在HTTP/2中TCP三次握手后会进入SSL/TSL握手&#xff0c;当SSL/TSL建立链接后&#xff0c;才会进行报文的传输。 二、HTTPS的混合加密 我们先来认识密钥&#xff1a; 密钥是用于加密和解密数据…

【spring】@PathVariable注解学习

PathVariable介绍 PathVariable是Spring框架中的一个注解&#xff0c;主要用于处理RESTful风格URL中的路径变量。在RESTful接口设计中&#xff0c;我们经常将资源的ID或者其他标识信息直接放在URL路径中&#xff0c;而不是作为查询参数。PathVariable注解使得控制器方法能够轻…

开源博客项目Blog .NET Core源码学习(22:App.Hosting项目结构分析-10)

本文学习并分析App.Hosting项目中后台管理页面的通知公告维护页面、友情链接维护页面。 通知公告维护页面 通知公告维护页面用于显示、检索、新建、编辑、删除通知公告数据&#xff0c;以便在前台页面的首页循环显示通知公告。通知公告维护页面附带一新建及编辑页面&#xff0…

hsql学习笔记

1. row_number() over (partition by uid order by dt 分析&#xff1a; row_number()&#xff1a; 这是一个窗口函数&#xff0c;用于为结果集中的每一行分配一个唯一的序号。默认情况下&#xff0c;这个序号是按照查询结果的顺序来分配的&#xff0c;但你可以通过OVER()子句…

docker搭建私有仓库并推送本地镜像

1、私仓搭建 docker pull registry#拉取镜像 docker images#查看镜像 mkdir -p /czx/myregistry 创建挂载目录 运行私有库registry (相当于本地有个是有docker hub) docker run -d -p 5000:5000 -v /czx/myregistry/:/tmp/registry --restartalways --privilegedtrue regist…

如何利用GitHubAction来发布自己的Python软件包

我们开发的python软件包如果想发布到网上&#xff0c;可以让其他人通过pip install下载&#xff0c;一般是把软件包发布到PYPI平台。 PYPI准备 我们要现在pypi注册登录一下 文件组织架构 一般的python软件包的文件组织架构为包名文件夹__init__.py程序&#xff0c;包文件夹的…

让写书人勇敢穿越纸海的迷雾

坚守纸海&#xff1a;让写书人勇敢穿越纸海的迷雾 你作为一位写书人&#xff0c;在创作过程中你需要坚守初心是非常重要的。在创作的过程中&#xff0c;你会遇到各种挑战和困难&#xff0c;你要勇敢面对迷雾中的挑战&#xff0c;并通过不懈的努力和决心&#xff0c;成功地穿越…

从反向传播(BP)到BPTT:详细数学推导【原理理解】

从反向传播到BPTT&#xff1a;详细推导与问题解析 在本文中&#xff0c;我们将从反向传播算法开始&#xff0c;详细推导出反向传播通过时间&#xff08;Backpropagation Through Time, BPTT&#xff09;算法。重点讨论BPTT中的梯度消失和梯度爆炸问题&#xff0c;并解释如何解…

[Linux]Crond任务调度以及at任务调度

一.crond任务定时调度 crond是反复检测执行的&#xff0c;一个任务结束后&#xff0c;在所规定的时间之后会再次执行 crontab 指令可以给系统分配定时任务 crontab -e 进入编辑页面&#xff0c;设定任务 crontab -l 查看已有定时任务 crontab -r 删除所有任务 编辑时&#xff…

清华新突破||新研究揭示多智能体协作的秘密武器

获取本文论文原文PDF&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读点击订阅&#xff1a;人工智能论文解读合集 引言&#xff1a;多智能体协作中的挑战与机遇 在多智能体系统中&#xff0c;智能体需要通过协作来完成复杂的任务&#xff0c;这种协作涉及到通信…

二叉树链式结构补充

1.二叉树k层结点个数 2.二叉树查找值为x的结点 3.二叉树基础oj练习 1.二叉树k层结点个数 设置k值&#xff0c;k层到1结点的值是k-1&#xff0c;所以1结点到k层的结点也是k-1的距离&#xff08;高度&#xff09;&#xff0c;这样就可以每下一层就把k值减少一个单位&#xff0…

MySQL的数据库和表

查看数据库 命令行的方式&#xff1a; cd /mysql/bin mysql.exe -uroot -p IP&#xff08;不是连接自己&#xff09; 端口&#xff08;不是3306&#xff09; show databases; 直接使用图形化界面点击&#xff1a; 查看库里的表 使用命令行查看&#xff1a; 进入mysql数据库 u…