vue2.X项目中集成bpmn-process-designer 流程设计器

bpmn-process-designer是什么

一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的 BPMN 2.0 流程设计器（网页版），您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。

项目内置 activiti、flowable、camunda 三种流程引擎支持文件，并提供了常见功能自定义方法与演示代码。

但由于 bpmn.js 与实际业务的特殊性，本项目暂不支持直接使用与发布 NPM 依赖，建议根据实际需求参照 App.vue 进行使用和二次开发。
详细地址见 https://gitee.com/MiyueSC/bpmn-process-designer

集成步骤

1. 首先下载代码到本地，打开代码可以看到目录结构
   

2. 项目文件迁移
   1） 首先解决依赖，找到原项目的package.json与本地vue项目做对比，将没有的dependencies和devDependencies ,最终要的是 diagram.js版本，一定与原项目保持一致选用8.9.0，否则会出现某些连线无法使用 例如：this._overlays.isShown is not function
   2）将packages文件夹整体迁移到本地vue项目中，作者将packages中components文件夹提取出来和本地已有文件件进行了合并；将type文件夹迁移到本地vue项目src下；最后将utils文件夹迁移到本地vue项目src下
   

3. 修改相关import引入路径 例如原路径import EventEmitter from “@utils/EventEmitter”;
   作者的项目中改为import EventEmitter from “@/util/EventEmitter”;所有的都要处理

4. 修改Main.js文件
   (1)引入图标

import "./packages/bpmn-icons";

（2）引入高亮

import { vuePlugin } from "./packages/highlight";
import "highlight.js/styles/atom-one-dark-reasonable.css";
Vue.use(vuePlugin);

（3）引入common组件,和全局样式index.scss,index.scss中可能出现冲突写法将@import 中的@文件路径改为~

import Common from "./components/common";

import ResetPopover from "./util/resetPopover";
import './packages/theme/index.scss';
Vue.use(Common);
Vue.directive("r-popover", ResetPopover);

5. store下文件迁移，本地项目中原有store文件夹，需要将packages下store中js提取出来，封装在原有src下，并修改src/packages/bpmn-utils/BpmnDesignerUtils.js文件中store的引入
   

 src/packages/bpmn-utils/BpmnDesignerUtils.js

6.修改完成后 使用npm install
npm run dev
参考

https://www.815494.com/biancheng/?read-1690498834a815815.html

后续继续进行改造