vue3 集成bpmn-js

### Vue 3 集成 BPMN-JS 实现业务流程建模

为了在 Vue 3 中集成 `bpmn-js` 来实现业务流程建模功能，可以按照如下方法操作：

#### 安装依赖库
首先，在项目根目录下通过 npm 或 yarn 安装必要的包。

npm install bpmn-js vue@next

或者使用 Yarn:

yarn add bpmn-js vue@next

这一步骤确保了开发环境中有最新版本的 `bpmn-js` 和 Vue 3 可供使用[^1]。

#### 创建组件并初始化BPMN模型编辑器
接着，在 src/components 下新建一个名为 BpmnModeler.vue 的文件用于封装 `bpmn-js` 功能。以下是该组件的部分代码片段：

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

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import BpmnJS from 'bpmn-js/lib/Modeler';

const canvas = ref(null);

onMounted(() => {
    const bpmnjs = new BpmnJS({
        container: canvas.value,
        additionalModules: []
    });

    // 加载默认 XML 字符串作为初始图谱
    bpmnjs.createDiagram();
});
</script>

<style scoped>
div {
  width: 80vw;
  height: 90vh;
}
</style>

上述代码展示了如何利用 Composition API 初始化 `bpmn-js` 并将其渲染到指定 DOM 节点内。

#### 将自定义组件引入主应用
最后一步是在 App.vue 文件里注册刚刚创建好的 BpmnModeler 组件，并设置路由以便访问此页面。

<!-- App.vue -->
<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
// 导入其他必要模块...
import BpmnModeler from './components/BpmnModeler.vue'

// 设置路由配置...
{
  path: '/modeler',
  name: 'Modeler',
  component: BpmnModeler
}
</script>

这样就完成了基本的集成工作，用户可以通过浏览器地址栏输入 `/modeler` 访问带有 BPMN 编辑能力的新页面。