vue+bpmnjs新手起步

首先 在vue的項(xiàng)目中安裝bpmnjs依賴

npm install bpmn-js --save
npm install bpmn-js-properties-panel --save
npm install bpmn-moddle --save
npm install camunda-bpmn-moddle --save

安裝完成后 就可以使用了，初代使用方式：
1:在你需要顯示的頁面中

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>
<script>
// 引入相關(guān)的依賴
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "../mock/xmlStr2"; // 這里是直接引用了xml字符串
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

export default {
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null,
    };
  },
  mounted() {
      this.init()
  },
  methods: {
    init() {
      // 獲取到屬性ref為“canvas”的dom節(jié)點(diǎn)
      const canvas = this.$refs.canvas;
      //   const customTranslateModule = {
      //   translate: ["value", translatCustom],
      // };
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: "#js-properties-panel",
        },
        additionalModules: [
          // 右邊的屬性欄
          propertiesProviderModule,
          propertiesPanelModule,
          // customTranslateModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });
      this.createNewDiagram();
    },
    createNewDiagram() {
      // 將字符串轉(zhuǎn)換成圖顯示出來

      // return
      this.bpmnModeler.importXML(xmlStr, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 這里是成功之后的回調(diào), 可以在這里做一系列事情
          //   this.success();
        }
      });
    },
  },
};
</script>
<style scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>

上面代碼，可完成一個(gè)初始狀態(tài)的流程編輯器

初始流程圖編輯器