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

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

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

java 复制代码
"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

java 复制代码
//注册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修改如下:

javascript 复制代码
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();
相关推荐
qq_390161776 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543234 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test36 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome