Bpmn.js详细入门，创建节点，删除节点（章节一）

前言
首先这玩意没有一个标准的中文官方文档，英文的也没有，英文只有一个官方的各种案例，所以需要学习全面，还是得去官网的案例里面找
因为我在学这个的时候，网上搜到的很多信息都已经很老了，导致组件在使用过程中很多写法不对，甚至引入路径都找不到，所以我还是决定写一个相对新一点的，这里就给大家入个门，讲一些基本使用，以及我个人在过程中遇到的东西，希望能帮到你

这里是官网案例链接

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