bpmn-js+vue3 安装展示(一)

现在是 2023 年 10 月 21 日，编程行业的人找个工作相对于 5 年前来说，很难。“升职加薪”更不用说了。

不说了，回正题，本篇介绍在vue3中使用bpmn-js流程建模工具。

用到的这些

• vite4.5.0
• vue3.3.6
• bpmn2.0

项目创建

使用vite创建项目

安装

npm i bpmn-js
1

展示

<script setup>
import { ref,onMounted } from ''vue''

import Modeler from ''bpmn-js/lib/Modeler'';
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";

const canvas = ref();

onMounted(()=>{
    //初始化 modeler 编辑器
    const modeler = new Modeler({ container: canvas.value });
    //加上这一句,否则无法添加节点元素
    modeler.createDiagram();
});

</script>

<template>
  <div ref="canvas" class="editor"></div>
</template>

<style scoped>
.editor{
  width: 100%;
  height: 100%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

效果