bpmn-js vue3

### 如何在 Vue 3 中集成并使用 bpmn-js

为了实现 bpmn-js 和 Vue 3 的集成，可以遵循以下方法：

#### 安装依赖库
首先，在项目根目录下安装必要的 npm 包。这包括 `vue` 及其 CLI 工具用于构建应用程序框架，还有 `bpmn-js` 来提供 BPMN 图表编辑功能。

npm install vue@next @vue/cli-service bpmn-js --save

#### 创建组件文件
接着创建一个新的 Vue 组件来封装 bpmn-js 实例化逻辑以及渲染图表所需的 HTML 结构[^1]。

// src/components/BPMNDiagram.vue
<template>
  <div ref="canvas"></div>
</template>

<script>
import BpmnJS from 'bpmn-js/lib/Modeler';
export default {
  name: "BPMNDiagram",
  mounted() {
    this.bpmnjs = new BpmnJS({
      container: this.$refs.canvas,
    });
    
    const diagramXML = `
      <?xml version="1.0" encoding="UTF-8"?>
      <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
        <!-- Your BPMN XML content here -->
      </definitions>`;
      
    this.bpmnjs.importXML(diagramXML, (err) => {
      if (!err) console.log('success!');
    });
  },
};
</script>

此代码片段展示了如何通过自定义属性 `$ref` 获取 DOM 节点，并将其传递给 `new BpmnJS()` 构造函数作为容器参数；同时也演示了导入简单 BPMN 流程图的方法。

#### 使用新组件
最后一步是在应用的主要入口处引入刚刚创建好的组件，并像平常一样注册它以便可以在模板里调用。

<!-- App.vue -->
<template>
  <div id="app">
    <h1>BPMN Diagram Viewer</h1>
    <BPMNDiagram />
  </div>
</template>

<script>
import BPMNDiagram from './components/BPMNDiagram';

export default {
  components: { BPMNDiagram }
}
</script>

这样就完成了基本的设置过程，现在应该能够在浏览器中看到由 bpmn-js 渲染出来的空白画布等待进一步操作了。