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

最新推荐文章于 2025-10-16 16:08:27 发布

原创最新推荐文章于 2025-10-16 16:08:27 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

工作流专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在2023年的Vue3项目中使用bpmn-js进行流程建模，包括创建Vite项目、安装依赖和在模板中集成模型编辑器。展示了基本的代码片段和最终效果。

bpmn-js+vue3 安装展示（一）

项目创建
安装
展示

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

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

用到的这些

vite4.5.0
vue3.3.6
bpmn2.0

项目创建

使用vite创建项目

安装

npm i bpmn-js

展示

<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>