vue项目中使用bpmn-基础篇

首先，看一眼效果图

1.安装bpmn-js

npm install bpmn-js --save

2.在main.js中引入样式

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

3.vue页面引入并使用bpmn

import BpmnModeler from 'bpmn-js/lib/Modeler';
import CustomPaletteProvider from './customPalette';
import camundaExtension from './resources/camunda';

4.基本操作：前进、回退、bpmn文件导入、导出

5.后续

　　最近在用这个组件画图，遇到了很多知识点，例如预览、更新节点名字、更新节点颜色、点击xml获取节点 id、根据id获取元素实例，后续慢慢整理~