bpmn-js VUE前端部署及汉化_bpmn.js如何连接camunda vue

版权声明：转载请附上原文出处链接和本声明。

今天给大家分享一款JS工作流绘制框架：bpmn-js，官网地址：bpmn-js，通过这个框架可以在网页上编写工作流，支持在线编写并绑定业务，使用方法如下：

首先安装bpmn-js依赖

npm install --save bpmn-js

npm install --save camunda-bpmn-moddle

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

在安装过程中可能会出现以下提示

解决方法如下（依次执行下面三个步骤）：

npm audit fix

npm audit fix --force

npm audit

如果项目里没有安装webpack打包，还要安装一下webpack

npm install webpack --save-dev

接下来就是编写代码了：

.VUE

<template>
  <div class="flow-container">
    <div class="containers" ref="content">
      <div class="canvas" ref="canvas"></div>
      <div id="js-properties-panel" class="panel"></div>
      <ul class="buttons">
      <li>下载</li>
      <li>
        <a ref="saveDiagram" href="javascript:" title="download BPMN diagram">BPMN diagram</a>
      </li>
      <li>
        <a ref="saveSvg" href="javascript:" title="download as SVG image">SVG image</a>
      </li>
    </ul>
    </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16