乐趣区

关于前端:LogicFlow插件用前准备

jiezi

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

🚀技术 & 代码分享

  • 我在 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 的代码仓库，本节源码将应用注册到实例的形式操作，搞定后就马上要开始插件局部的学习了~

如果看完感觉有播种，欢送点赞、评论、分享反对一下。你的反对和必定，是我保持写作的能源~

退出移动版