BPMN.js 是一個流程設計器，它使用 BPMN 這個標準來描述業務流程。它提供了很多開放接口，這樣就可以根據業務需求來定制功能，這使得它非常受歡迎。下面讓我們來看一下，在 Vue 中如何使用 BPMN.js。

首先需要在項目中安裝并導入 bpmn-js 包(也可以使用 yarn)：

yarn add bpmn-js

然后我們需要在 Vue 組件中引入 bpmn-js 包，按照如下代碼來實現：

import BpmnViewer from 'bpmn-js/lib/Viewer';
import BpmnModeler from 'bpmn-js/lib/Modeler';

const viewer = new BpmnViewer({ container: '#canvas' });
const modeler = new BpmnModeler({ container: '#canvas' });

在上述代碼中，我們用 BpmnViewer 來創建了一個 bpmn-js 的 viewer 實例，這個實例可以用來顯示 bpmn 文件。而另一方面，我們又聲明了一個 BpmnModeler 實例用來編輯 bpmn 文件。

接下來，我們需要在 HTML 文件中引入 bpmn 文件：

<div id="canvas"></div>

之后就可以使用 viewer 和 modeler 實例來展示或編輯這個 bpmn 文件，具體操作可以參考 bpmn-js 官方文檔。

最后，需要注意的是 BPMN.js 是一個基于 DOM 的庫，也就是說不能直接在 Vue 中使用它。因此，我們需要結合 Vue 來實現在 Vue 中使用 BPMN.js 的目的。

通過將 bpmn 文件轉換成 XML 文件，并結合 Vue 的 v-pre 渲染方式去渲染這個 XML 文件，從而將 bpmn 渲染出來。這些操作都可以在 bpmn-js 官方文檔中找到。