北京中烟创新科技有限公司(简称:中烟创新)自成立以来,一直专注于人工智能技术的研发和人机协同应用场景的赋能,并以此为核心提供专业的服务。在过去的近一年中,公司取得了一些令人瞩目的研究成果,我们一直坚持把一些研究成果技术分享给更多人,今天是中烟创新第十一次技术分享,希望能为前沿技术探索者贡献一份力量,互相学习,共同进步。
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.组件使用
class="my-flow" v-model="elements">
"width: fit-view-on-init;"
hidden
label>
div>
Panel>
VueFlow>
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.