vue2引入使用bpmn.js

### 在 Vue 2 中引入和使用 bpmn.js 进行流程图编辑

#### 安装依赖库
为了能够在 Vue 2 项目中顺利使用 `bpmn.js`，需要先安装必要的 npm 包。通过命令行工具执行如下指令来完成安装：

npm install bpmn-js --save

此操作会下载并保存 `bpmn.js` 及其相关依赖到项目的 node_modules 文件夹下。

#### 配置 Webpack 加载 .bpmn 文件
为了让 webpack 正确处理 `.bpmn` 类型文件，在 vue.config.js 中添加相应的加载器规则[^3]：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.bpmn$/,
          type: 'asset/source'
        }
      ]
    }
  }
};

上述配置使得 webpack 能够识别并正确解析 BPMN 文件作为资源源码而非默认尝试编译这些文件。

#### 创建 Bpmn 组件
创建一个新的组件用于封装 `bpmn.js` 的核心功能。下面是一个简单的例子展示如何初始化一个基本的画布实例，并提供一些基础的方法供外部调用[^1]：

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

<script>
import BpmnJS from "bpmn-js/lib/Modeler";
export default {
  name: "BpmnEditor",
  data() {
    return {
      bpmnjs: null,
      container: null,
      canvas: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const viewer = new BpmnJS({
        container: this.$refs.canvas
      });
      
      this.bpmnjs = viewer;
      this.container = viewer.get("container");
      this.canvas = viewer.get("canvas");

      // Load an existing diagram or create a blank one.
      this.loadDiagram();
    },

    loadDiagram(diagramXml) {
      if (diagramXml) {
        this.bpmnjs.importXML(diagramXml, err => {
          if (err) console.error(err);
        });
      } else {
        this.bpmnjs.createDiagram(err => {
          if (err) console.error(err);
        });
      }
    }
  }
};
</script>

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

这段代码定义了一个名为 `BpmnEditor` 的 Vue 组件，它利用 `ref` 属性获取 DOM 元素并将其实例化为 `bpmn-js` 的容器。同时提供了两个主要函数：一个是用来初始化模型查看器；另一个则是负责导入 XML 字符串形式表示的图表数据或将新图表设置为空白状态。

#### 使用自定义事件与父级交互
如果希望让这个子组件能够向它的上级发送消息（比如当某个特定动作发生时），可以考虑采用 `$emit()` 方法触发自定义事件。例如，在成功加载或修改了某张图表之后通知其他部分更新视图或其他逻辑处理。

#### 实现更多高级特性
对于更复杂的业务场景来说，可能还需要进一步扩展该组件的功能集，像支持拖拽节点、调整连线样式等增强用户体验的操作都可以基于官方文档逐步实现[^2]。