【技术分享之十一】Vue-flow AI工作流前端开发组件库- 大数跨境

中烟创新

2024-06-12

导读：只有你能分享的知识，才是真正属于你的真知

北京中烟创新科技有限公司（简称：中烟创新）自成立以来，一直专注于人工智能技术的研发和人机协同应用场景的赋能，并以此为核心提供专业的服务。在过去的近一年中，公司取得了一些令人瞩目的研究成果，我们一直坚持把一些研究成果技术分享给更多人，今天是中烟创新第十一次技术分享，希望能为前沿技术探索者贡献一份力量，互相学习，共同进步。

Vue Flow具有内置功能，如缩放和平移以及专用控件、单选和多选、可拖动元素、可自定义的节点和边以及一系列事件处理程序。

Vue-flow是 ReactFlow 的 Vue 版本，目前只支持在Vue3中使用，对Vue2不兼容，目前国内使用较少。包含四个功能组件 core、background、controls、minimap，可按需使用。

Vueflow官网：https://vueflow.dev/

Github地址：https://github.com/bcakmakoglu/vue-flow

这个组件库可用于开发大模型配置工作流。

优点

轻松上手：内置缩放和平移功能、元素拖动、选择等等。

可定制：使用自定义节点、边缘和连接线并扩展Vue Flow的功能。

快速：链路被动更改，仅重新渲染适当的元素。

工具和组合：带有图形助手和状态可组合函数，用于高级用途。

附加组件：背景（内置模式、高度、宽度或颜色），小地图（右下角）、控件（左下角）。

缺点

仓库迭代版本较少，2022年进入首次迭代。

国内使用人数少，没有相关技术博客介绍，通过官网学习。

1.依赖安装

$ npm i --save @vue-flow/core# or$ yarn add @vue-flow/core# 其他根据需要安装，例如：$ npm i --save @vue-flow/additional-components

2.局部引入

//样式引入import '@vue-flow/core/dist/style.css';import '@vue-flow/core/dist/theme-default.css';//根据使用情况，引入相关组件import { Background, Panel, PanelPosition, Controls } from '@vue-flow/additional-components'import { VueFlow, useVueFlow } from '@vue-flow/core'

3.组件使用

<VueFlow style="width: fit-view-on-init;" class="my-flow" v-model="elements">  <Background />  <Panel :position="PanelPosition.TopRight">    <div>      <label for="ishidden">        hidden        <input id="ishidden" v-model="isHidden" type="checkbox" />      </label>    </div>  </Panel>  <Controls /></VueFlow>