跳到主要内容

快速开始

本指南将从 Vue 项目创建开始一步一步教您将 bpmn-js 集成到项目中。

创建项目​

npm create vite@latest my-bpmn-modeler -- --template vue-ts

创建成功后的项目结构请查看官方提供的示例

添加依赖​

npm install bpmn-js diagram-js-grid --save-dev

这里我们添加一个 bpmn-js 扩展 diagram-js-grid 用于在画板中显示网格。

集成 bpmn-js​

首先我们移除项目中的无用代码，然后创建一个 Modeler 组件。

创建 BPMN Modeler

const bpmnModeler = shallowRef<BpmnModeler>();

new BpmnModeler({
    container: '#id', // 这里也可以是一个 HTML 元素
    additionalModules: [
        // 这里是插件
    ]
});

在 Vue 中我们一般使用 ref 绑定一个元素

<template>
  <div class="modeler-container" ref="modelerContainerRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
const modelerContainerRef = ref<HTMLDivElement>();
</script>

那创建 BPMN Modeler 的方法就可以这样写

const bpmnModeler = shallowRef<BpmnModeler>();

new BpmnModeler({
    container: modelerContainerRef.value as HTMLElement, // 这里也可以是一个 HTML 元素
    additionalModules: [
        // 这里是插件
    ]
});

完整代码​

:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
}

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#app{
    height: 100%;
    width: 100%;
}

.djs-container svg:focus {
    outline: none;
}

.djs-container svg:focus 这个样式是为了去除 bpmn 画板在激活状态下的黑色边框。