# vue-learn

**Repository Path**: mindse/vue-learn

## Basic Information

- **Project Name**: vue-learn
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-30
- **Last Updated**: 2022-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bpmn.js 学习

## bpmn.js 是什么
*[bpmn-js](https://bpmn.io/toolkit/bpmn-js/)  A BPMN 2.0 rendering toolkit and web modeler.
简单点来说就是用来绘制诸如 Camunda、Flowable、Activiti等工作流框架流程定义文件的web设计工具包。*

## 您需要做如下准备
### 知识点
 1. [ECMAScript 6](https://es6.ruanyifeng.com/) 
 2. [vue 3.x](https://v3.cn.vuejs.org/)
 3. [element-plus](https://element-plus.gitee.io/zh-CN/)
 4. [Vue CLI](https://cli.vuejs.org/zh/guide/)
### 开发工具
 1. Visual Studio Code
### bpmn.js依赖版本
 ```json5
    {
        "dependencies": {
            "@bpmn-io/properties-panel": "^0.12.0",
            "bpmn-js": "^9.0.3",
            "bpmn-js-properties-panel": "^1.0.0-alpha.5"
        }
    }
```
### 概念定义
![概念定义](./public/image/概念定义.png "——图引<自运维咖啡吧>")
## show me the code

### 定义项目模板

1. 创建vue3项目（基于@vue/cli 4.5.15 + vue3.x）
![目录](./public/image/概念定义.png)   
 
2. 引入 element-plus
 ```shell script
# 终端
npm install  element-plus --save

# main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
```

3. 引入 bpmn.js依赖版本
```shell script
npm install  @bpmn-io/properties-panel@0.12.0 --save
npm install  bpmn-js@9.0.3 --save
npm install  bpmn-js-properties-panel@1.0.0-alpha.5 --save
```

4. 页面布局
```vue

```
![效果图](./public/image/概念定义.png)  
  
### 流程设计页面
1. 创建 BpmnModeler
2. 设计区域 导入、撤销、恢复、放大、缩小、还原 系列操作
3. 属性编辑
    - 颜色改变
    - 名称改变
    - 类型改变
    - 自定义属性
4. 保存为.bpmn文件
### 流程查看页面
1. 基于 BpmnViewer
   - 创建 BpmnViewer
   - 改变颜色
   - 鼠标移入显示属性
2. 基于 BpmnModeler
   - 创建 BpmnModeler
   - 改变颜色
   - 鼠标移入显示属性
   
### 自定义元素
1. 自定义左侧工具栏
2. 自定义流程设计区域渲染
3. 自定义属性面板   

### 致谢
0. [github—bpmn-io](https://github.com/bpmn-io)
1. [掘金—LinDaiDai_霖呆呆](https://juejin.cn/post/6844904017567416328)
2. [掘金—MiyueFElv](https://juejin.cn/column/6964382482007490590)
3. [运维咖啡吧](https://blog.ops-coffee.cn/bpmn)
4. [简书—吉他手_c156](https://www.jianshu.com/p/e4e0499517b6)
5. [CSDN-_pengliang](https://blog.csdn.net/qq_39211165/category_10489963.html)