LogicFlow插件使用前準備詳解

更新時間：2023年01月29日 11:19:40 作者：小鑫同學

這篇文章主要為大家介紹了LogicFlow插件使用前準備詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

進入正題

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點自定義、插件等拓展機制

LogicFlow支持前端研發(fā)自定義開發(fā)各種邏輯編排場景，如流程圖、ER圖、BPMN流程等。在工作審批配置、機器人邏輯編排、無代碼平臺流程配置都有較好的應用。

這一節(jié)將講解快速上手 LogicFlow 流程圖編輯框架的插件用前準備工作，項目整體基于Vue3+Vite3+Ts4開發(fā)，為幫助還為熟練使用 Vue3 和 Typescript 語法的小伙伴提供便利，如果你已經(jīng)很熟練在Vue3中的開發(fā)習慣，建議直接訪問 LogicFlow 將獲取完整的入門指南。

1. 安裝插件擴展模塊：

當你真的需要用到插件的功能時可以安裝下面這個模塊，每個模塊各司其職：

npm i @logicflow/extension

2. 注冊插件到全局或實例

插件的注冊分為兩種，分別是注冊到全局和注冊到實例，這個就需要按你業(yè)務的實際需要來設置了：

注冊到全局：將如下的代碼安裝到 Vue 的 main.ts 入口文件中即可

import { BpmnElement } from '@logicflow/extension';
LogicFlow.use(BpmnElement);

注冊到實例：將擴展包在LF對象實例化后，將需要用到的插件通過 plugins 注冊

import LogicFlow from "@logicflow/core";
import { DndPanel, SelectionSelect, Group } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  plugins: [DndPanel, SelectionSelect, Group]
});