bpmn-js VUE前端部署及汉化

Ydada_

已于 2022-10-10 15:53:50 修改

阅读量9.6k

点赞数 5

文章标签：前端 activity bpmn 工作流 vue

于 2019-10-25 11:02:04 首次发布

本文链接：https://blog.csdn.net/Ydada_/article/details/102737128

版权

本文介绍了如何在Vue项目中部署和汉化bpmn-js工作流绘制框架。首先通过npm安装bpmn-js及相关依赖，然后解决可能出现的npm audit警告。在项目中编写Vue组件，并在js层引入汉化文件，最后在additionalModules中引入该模块，实现汉化。

摘要由CSDN通过智能技术生成

bpmn-js 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>