因为这个项目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 nbachengexport 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();