前言
首先这玩意没有一个标准的中文官方文档,英文的也没有,英文只有一个官方的各种案例,所以需要学习全面,还是得去官网的案例里面找
因为我在学这个的时候,网上搜到的很多信息都已经很老了,导致组件在使用过程中很多写法不对,甚至引入路径都找不到,所以我还是决定写一个相对新一点的,这里就给大家入个门,讲一些基本使用,以及我个人在过程中遇到的东西,希望能帮到你
这里是官网案例链接
https://github.com/bpmn-io/bpmn-js-examples
一、首先下载插件命令
npm i bpmn-js --save-D
npm i bpmn-js-properties-panel --save-D
二、开始建模
因为我是用的vue,有用react或者angluar的需要根据其中代码流程稍作修改,跟框架关系并不大,不影响入门
首先在min.js里面引入全局样式
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");
import("bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css");
import("bpmn-js-properties-panel/dist/assets/properties-panel.css");
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
<div id="js-properties-panel" class="panel"></div>
</div>
</template>
//然后写样式
<style>
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
然后就是js写法了
import BpmnModeler