LogicFlow插件用前准备

🎄Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将使用更为实用的案例输出更多的编程知识，同时我信奉分享是成长的唯一捷径，在这里也希望我的每一篇文章都能成为你技术落地的参考~

专栏目录：

1. LogicFlow安装与准备工作 
2. LogicFlow自定义业务节点
3. LogicFlow自定义边（Edge）  
4. LogicFlow更多配置选项  
5. LogicFlow插件用前准备  
6. LogicFlow内置插件使用  
7. LogicFlow内置菜单插件

🚀技术&代码分享

• 我在 IT200 总结技术学习；
• 我在 1024Code 在线编写代码；
• 我在 掘金 分享技术文章；
• 我在 Github 参与开源学习；

😇推荐几个好用的工具

• var-conv 适用于VSCode IDE的代码变量名称快速转换工具
• generator-vite-plugin 快速生成Vite插件模板项目
• generator-babel-plugin 快速生成Babel插件模板项目

进入正题

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

这一节将讲解快速上手 LogicFlow 流程图编辑框架的插件用前准备工作，项目整体基于Vue3+Vite3+Ts4开发，为帮助还为熟练使用 Vue3 和 Typescript 语法的小伙伴提供便利，如果你已经很熟练在Vue3中的开发习惯，建议直接访问 LogicFlow 将获取完整的入门指南。

1. 安装插件扩展模块：

当你真的需要用到插件的功能时可以安装下面这个模块，每个模块各司其职：

npm i @logicflow/extension

2. 注册插件到全局或实例

插件的注册分为两种，分别是注册到全局和注册到实例，这个就需要按你业务的实际需要来设置了：

• 注册到全局：将如下的代码安装到 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]
});

总结

这一节的内容就到此结束了，本小节内容简单，主要是为了提供一份可以为后续内置插件和自定义插件的使用提供一份可以fork的代码仓库，本节源码将使用注册到实例的方式操作，搞定后就马上要开始插件部分的学习了~

---

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~