如何在vue3中使用camunda/camunda-modeler-vue

在 Vue3 中引入和使用 Camunda Modeler Vue 的步骤如下：

1. **安装依赖**:
首先，你需要在项目中安装 `@camunda/camunda-modeler` 和 `@camunda/camunda-modeler-vue` 包。使用 npm 或 yarn 完成这个步骤：

   npm install @camunda/camunda-modeler @camunda/camunda-modeler-vue
   # 或者
   yarn add @camunda/camunda-modeler @camunda/camunda-modeler-vue

2. **引入库**:
在你的主入口文件（通常是一个 Vue 组件）中，导入 Modeler Vue 实例并绑定到组件上：

   import { CamundaModeler } from '@camunda/camunda-modeler';
   import { ModelerVue } from '@camunda/camunda-modeler-vue';

   export default {
     setup() {
       const modeler = new CamundaModeler({
         container: 'process-diagram', // 指定模型容器 DOM 元素 ID
         plugins: [ModelerVue]
       });

       return { modeler };
     }
   };

3. **配置选项**:
可能需要根据应用需求配置 Modeler Vue 的其他选项，如图层、事件监听等。

4. **开始使用**:
现在你可以创建流程图元素，并利用 Modeler Vue 提供的 API 进行操作，比如画框、连线、添加事件等。例如：

   const diagram = modeler.createDiagram();
   diagram.addShape('bpmn:StartEvent', { x: 50, y: 50 });