bpmn2 vue 设计器_在vue中使用bpmn-js（一）

由于之前的公司的项目中的工作流管理要用到流程图，而bpmn-js官方的文档是全英的而且使用的js框架是jQuery，可能是比较新的技术，官方也还在不断的更新，相关的文档或者资料很少很难找，只好自己不断爬坑填坑了。

什么是bpmn-js？

1.先从简单开始，能获取服务器上的流程图并显示出来：

安装相关的依赖都是必须的，可以在官方文档上查看，在这里就不详细讲了。

html: (界面很简单，这些都是必需的。)

js:

// 引入相关的依赖

import BpmnViewer from 'bpmn-js'

import BpmnModeler from 'bpmn-js/lib/Modeler'

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

}

},

methods:{