vue3流程图组件vue flow使用

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、组件使用

  
  
    

      
        hidden
        
      
    
  
  

4、vue3、elementui完整代码

官方文档：https://vueflow.dev/

旧版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage

新版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage-el

演示地址：http://101.43.32.67:8081