1.将下面地址的代码下载到本地
https://gitee.com/MiyueSC/bpmn-process-designer#https://github.com/bpmn-io/bpmn-js
2.替换dependencies和devDependencies
打开下载的代码，找到package.json里的dependencies，将自己缺少的复制到自己dependencies，另外需要将devDependencies内的bpmn-js和bpmn-js-properties-panel复制到自己的devDependencies内，否则会报错，重新npm install
3.拷贝package目录
将package目录拷贝到您的项目中，如放在src下。这个package是核心文件夹，如果要定制化，都到这里面找。
4.在main.js引入代码
// 加载基础ElementUI，如果您的项目是基于elementUI，则这段代码不需要 import ElementUI from “element-ui”; Vue.use(ElementUI); i // 引入bpmn-process-designer插件 add by nbacheng 2022-09-29 import "@/plugins/package/theme/element-variables.scss"; import "@/plugins/package/theme/index.scss"; import { vuePlugin } from "@/plugins/package/highlight"; import "highlight.js/styles/atom-one-dark-reasonable.css"; Vue.use(vuePlugin); // 引入bpmn插件 import "bpmn-js/dist/assets/diagram-js.css"; import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"; import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
5.拷贝src
将下载的src里面的文件都拷贝到自己项目的src下面，修改引入地址即可。
主要是
6.拷贝App.vue代码
下载的src目录的App.vue就是流程图文件了，将里面的代码拷贝到自己需要使用的文件中，修改引用地址，即集成成功
7、为了兼容原有的流程设计器，所以做了多处修改，包括
ElementBaseInfo.vue
ElementMultiInstance.vue
UserTask.vue
最后效果如下：
