Vue 整合 Vue Flow：从零构建交互式流程图

于 2025-07-08 13:58:09 发布
阅读量292 收藏 11
点赞数 5
CC 4.0 BY-SA版权
分类专栏： VUE 流程图 前端开发 文章标签： vue.js 流程图 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LocalHost_1/article/details/149196314

目录

引言

        Vue Flow 是一个基于 Vue 的流程图库，结合 Vue.js 的组件化优势，可用于创建交互式、可视化的流程图。本文将逐步引导你整合 Vue Flow，涵盖从环境配置到自定义节点、拖拽、连线、删除、JSON 管理和优化，适合初学者和高级开发者。

目的

 本文旨在提供一个全面的指南，帮助开发者：

  • 理解 Vue Flow 的核心功能和集成流程。
  • 实现交互式流程图，包括拖拽、连线和节点管理。
  • 掌握数据持久化（保存和导入 JSON），提升项目实用性。
  • 优化性能并解决常见问题，确保生产环境稳定。

适用场景

  • 工作流管理：设计审批或任务流程。
  • 数据可视化：展示组织结构或网络拓扑。
  • 工业自动化：模拟设备连接和生产流程。
  • 教育工具：可视化算法或逻辑步骤。
  • 说明插图：绘制一个工业流程图，包含 “设备1”, “工序1”, “设备2” 节点和连接线。

环境准备

  • 项目初始化：使用 Vue 3 + Vite 创建项目。

  • 依赖安装:

npm install @vue-flow/core @vue-flow/background @vue-flow/controls @vue-flow/minimap ant-design-vue

@vue-flow/core：核心库。
@vue-flow/background：背景网格。
@vue-flow/controls：交互控制。
@vue-flow/minimap：画布概览。
ant-design-vue：用于按钮样式。
在这里插入图片描述

基础组件 (index.vue)

创建 src/components/FlowChart.vue 作为流程图容器。

<template>
  <div class="flow-container">
    <div class="layout">
      <!-- 左侧可选项区域 -->
      <div class="sidebar">
        <h3>可拖拽节点</h3>
        <div
          v-for="option in nodeOptions"
          :key="option.type"
          class="draggable-node"
          :data-type="option.type"
          draggable="true"
          @dragstart="onDragStart"
        >
          <div class="node-label">{{ option.label }}</div>
          <div class="node-preview-wrapper">
            <div :class="['inner-shape', option.shapeClass]">
              <div class="label">{{ option.label }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧 Vue Flow 画布 -->
      <div class="flow-area">
        <div class="toolbar">
          <a-button type="primary" @click="addRandomNode">添加随机节点</a-button>
<!--          <a-button type="danger" @click="deleteSelected">删除选中节点</a-button>-->
          <a-button type="default" @click="exportJson">导出 JSON</a-button>
          <a-button type="default" @click="saveExportJson">保存流程图</a-button>
        </div>

        <VueFlow
          v-model:nodes="nodes"
          v-model:edges="edges"
          :node-types="nodeTypes"
          :default-edge-options="{
            type: 'smoothstep',
            animated: true,
            markerEnd: { type: 'arrowclosed', color: '#ff0000' },
            style: { stroke: '#ff0000', strokeWidth: 2, strokeDasharray: 'none' },
          }"
          :connection-line-style="{ stroke: '#ff0000', strokeWidth: 2, strokeDasharray: 'none' }"
          :fit-view-on-init="true"
          :connectable="true"
          @drop="onDrop"
          @dragover.prevent
          @connect="onConnect"
          @node-click="onNodeClick"
          @node-drag-start="onNodeDragStart"
          @node-drag-stop="onNodeDragStop"
          @pane-click="onPaneClick"
        >
          <Background variant="dots" :gap="20" />
          <Controls />
          <MiniMap />
        </VueFlow>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, markRaw, onMounted} from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import type { NodeTypesObject } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { message } from 'ant-design-vue'
import DiamondNode from './DiamondNode.vue'
import CircleNode from './CircleNode.vue'
import ImageNode from './ImageNode.vue'
import DeviceNode from './DeviceNode.vue'
import UserNode from './UserNode.vue'
import RoundedRectangleNode from './RoundedRectangleNode.vue'
import { editingNodeId } from './store'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import '../style/node-styles.css'

const nodes = ref([])
const edges = ref<any>([])

const nodeTypes: NodeTypesObject = {
  diamond: markRaw(DiamondNode),
  circle: markRaw(CircleNode),
  image: markRaw(ImageNode),
  user: markRaw(UserNode),
  device: markRaw(DeviceNode),
  roundedRectangle: markRaw(RoundedRectangleNode),
}

const { addNodes, getNodes, deleteElements,removeNodes } = useVueFlow()

const nodeOptions = ref([
  { type: 'circle', label: '开始节点', shapeClass: 'node-circle' },
  { type: 'circle', label: '结束节点', shapeClass: 'node-circle' },
  // { type: 'image', label: '图片节点', shapeClass: 'node-image' }, // 新增图片节点
  // { type: 'device', label: '设备节点', shapeClass: 'node-device' }, // 新增设备节点
  // { type: 'user', label: '人员节点', shapeClass: 'node-user' }, // 新增人员节点
  // { type: 'roundedRectangle', label: '圆角长方形节点', shapeClass: 'node-rounded-rectangle' },

])

function initData(){
  return [
    { type: 'device', label: '设备节点', shapeClass: 'node-device',id:1,code:'123' },
    { type: 'device', label: '工序1', shapeClass: 'node-device',id:1,code:'123' },
    { type: 'device', label: '工序2', shapeClass: 'node-device',id:1,code:'123' },
    { type: 'device', label: '工序3', shapeClass: 'node-device',id:1,code:'123' },
  ]
}
function getData(){
    nodes.value = [{"":""}];
     edges.value = [{"":""}];
     
onMounted(() => {
  let data  =initData();
  nodeOptions.value = [...nodeOptions.value, ...data];
  getData();
})
// Drag-and-drop handlers
function onDragStart(event: DragEvent) {
  if (event.dataTransfer && event.target instanceof HTMLElement) {
    const type = event.target.dataset.type
    if (type) {
      event.dataTransfer.setData('application/vueflow-node-type', type)
    }
  }
}

function onDrop(event: DragEvent) {
  const type = event.dataTransfer?.getData('application/vueflow-node-type')
  if (!type) return

  const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect()
  const position = {
    x: event.clientX,
    y: event.clientY,
  }

  const label = type === 'diamond' ? '判断节点' : type === 'circle' ? '开始节点' : '圆角长方形节点'
  addNodes([
    {
      id: `${type}-${Date.now()}`,
      type,
      position,
      data: { label },
    },
  ])
}

// Connection handler
function onConnect(params: any) {
  edges.value = [
    ...edges.value,
    {
      ...params,
      id: `edge-${params.source}-${params.target}`,
      type: 'smoothstep',
      animated: true,
      markerEnd: { type: 'arrowclosed', color: '#ff0000' },
      style: { stroke: '#ff0000', strokeWidth: 2, strokeDasharray: 'none' },
    },
  ]
}

// Node interaction handlers
function onNodeClick(event: any, node: any) {
  nodes.value = nodes.value.map(n => ({
    ...n,
    selected: n.id === node.id ? true : false,
  }))
  // if (node.type === 'circle') {
  //   editingNodeId.value = node.id // 仅对圆形节点启用编辑模式
  // }
}

function onNodeDragStart(event: any, node: any) {
  console.log('Node drag started:', node)
}

function onNodeDragStop(event: any, node: any) {
  console.log('Node drag stopped:', node)
}

function onPaneClick() {
  nodes.value = nodes.value.map(n => ({ ...n, selected: false }))
  editingNodeId.value = null // 退出编辑模式
}

// Add a random node
function addRandomNode() {
  const types = ['diamond', 'circle', 'roundedRectangle','image','user','device']
  const type = types[Math.floor(Math.random() * types.length)]
  const label = type === 'diamond' ? '判断节点' : type === 'circle' ? '圆形节点' : '圆角长方形节点'
  addNodes([
    {
      id: `${type}-${Date.now()}`,
      type,
      position: { x: Math.random() * 500, y: Math.random() * 500 },
      data: { label },
    },
  ])
}

// Delete selected nodes
function deleteSelected() {
  const selectedIds = getNodes.value.filter(n => n.selected).map(n => n.id)
  if (selectedIds.length === 0) {
    message.warning('请先选中一个节点')
    return
  }
  removeNodes({ selectedIds })
  message.success('节点删除成功')
  editingNodeId.value = null // 退出编辑模式
}


function saveExportJson(){
  //todo 保存到数据库
}
// Export JSON
function exportJson() {
  const json = JSON.stringify({ nodes: nodes.value ,edges: edges.value }, null, 2)
  const blob = new Blob([json], { type: 'application/json' })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'flowchart.json'
  a.click()
  window.URL.revokeObjectURL(url)
  message.success('JSON 文件已导出')
}

// 更新节点标签
function updateNodeLabel(nodeId: string, newLabel: string) {
  nodes.value = nodes.value.map(n =>
    n.id === nodeId ? { ...n, data: { ...n.data, label: newLabel } } : n
  )
  editingNodeId.value = null // 编辑完成后退出编辑模式
}
</script>

       说明：基础组件包含侧边栏（拖拽源）、工具栏（操作按钮）和 VueFlow 画布，绑定了节点和边数据。

自定义组件 (矩形、菱形等)

定义不同形状的节点，添加多连接点。

RectangleNode.vue (矩形节点)：

<template>
  <div class="node rectangle">
    <Handle type="target" position="top" id="top-target" />
    <Handle type="source" position="top" id="top-source" />
    <Handle type="target" position="bottom" id="bottom-target" />
    <Handle type="source" position="bottom" id="bottom-source" />
    <Handle type="target" position="left" id="left-target" />
    <Handle type="source" position="left" id="left-source" />
    <Handle type="target" position="right" id="right-target" />
    <Handle type="source" position="right" id="right-source" />
    <div class="label">{{ data.label }}</div>
  </div>
</template>

<script setup>
import { Handle } from '@vue-flow/core'
defineProps({ data: Object })
</script>

<style scoped>
.node {
  width: 100px;
  height: 60px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label { text-align: center; }
</style>

DiamondNode.vue (菱形节点)：

<template>
  <div class="diamond-node">
    <!-- 顶部连接点：source 和 target -->
    <Handle type="target" position="top" class="handle" id="top-target" />
    <Handle type="source" position="top" class="handle" id="top-source" />
    <!-- 左侧连接点：source 和 target -->
    <Handle type="target" position="left" class="handle" id="left-target" />
    <Handle type="source" position="left" class="handle" id="left-source" />
    <!-- 右侧连接点：source 和 target -->
    <Handle type="target" position="right" class="handle" id="right-target" />
    <Handle type="source" position="right" class="handle" id="right-source" />
    <!-- 底部连接点：source 和 target -->
    <Handle type="target" position="bottom" class="handle" id="bottom-target" />
    <Handle type="source" position="bottom" class="handle" id="bottom-source" />
    <!-- 节点本体 -->
    <div class="diamond">
      <div class="label">{{ data.label }}</div>
    </div>
  </div>
</template>

<script setup>
import { Handle } from '@vue-flow/core'

defineProps({
  data: Object,
})
</script>

<style scoped>
.diamond-node {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: visible;
}

.diamond {
  width: 100%;
  height: 100%;
  background: #2ec4b6;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #333;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  z-index: 1;
}

.label {
  transform: rotate(-45deg);
  text-align: center;
  pointer-events: none;
  font-size: 12px;
  padding: 4px;
  max-width: 90%;
  word-break: break-all;
}

.handle {
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}

:deep(.vue-flow__handle-top) {
  top: -10px; /* 增加偏移量，使点移到顶部外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-bottom) {
  bottom: -10px; /* 增加偏移量，使点移到底部外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-left) {
  left: -10px; /* 增加偏移量，使点移到左侧外部 */
  top: 50%;
  transform: translateY(-50%);
}

:deep(.vue-flow__handle-right) {
  right: -10px; /* 增加偏移量，使点移到右侧外部 */
  top: 50%;
  transform: translateY(-50%);
}
</style>

说明：每个节点包含上下左右的 target 和 source 连接点，允许多向连接。

ImageNode(自定义图片节点):

<template>
  <div class="image-node">
    <!-- 顶部连接点：source 和 target -->
    <Handle type="target" position="top" class="handle" id="top-target" />
    <Handle type="source" position="top" class="handle" id="top-source" />
    <!-- 左侧连接点：source 和 target -->
    <Handle type="target" position="left" class="handle" id="left-target" />
    <Handle type="source" position="left" class="handle" id="left-source" />
    <!-- 右侧连接点：source 和 target -->
    <Handle type="target" position="right" class="handle" id="right-target" />
    <Handle type="source" position="right" class="handle" id="right-source" />
    <!-- 底部连接点：source 和 target -->
    <Handle type="target" position="bottom" class="handle" id="bottom-target" />
    <Handle type="source" position="bottom" class="handle" id="bottom-source" />
    <!-- 节点本体 -->
    <div class="image-container">
      <img :src="imageSrc" alt="Image Node" class="node-image" />
    </div>
  </div>
</template>

<script setup>
import { Handle } from '@vue-flow/core'
import { computed } from 'vue'

defineProps({
  data: Object,
})

const imageSrc = computed(() => {
  return new URL('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iMzYiIGN5PSIzNiIgcj0iMzYiPjwvY2lyY2xlPgogICAgICAgIDxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29tcG9zaXRlPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNCAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5Z+656GA5rWB56iL5Zu+LTAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA2LjAwMDAwMCwgLTkzLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEwLjAwMDAwMCwgOTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3ZhbCI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGwtb3BhY2l0eT0iMC49MiIgZmlsbD0iI2NjY2M5OThjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgc3Ryb2tlPSIjY2NjYzMzYzkiIHN0cm9rZS13aWR0aD0iMSIgY3g9IjM2IiBjeT0iMzYiIHI9IjM1LjUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHRleHQgaWQ9Iue7k+adn+iKgueCuSIgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtUmVndWxhciwgUGluZ0ZhbmcgU0MiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGxpbmUtc3BhY2luZz0iMTIiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC42NSI+CiAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjEyIiB5PSI0MSI+57uT5p2f6IqC54K5PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+', import.meta.url).href
})
</script>

<style scoped>
.image-node {
  position: relative;
  width: 50px; /* 调整为适合图片的尺寸 */
  height: 50px; /* 调整为适合图片的尺寸 */
  overflow: visible;
}

.image-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}

.node-image {
  max-width: 50px;
  max-height: 50px;
  overflow: visible;
  position: relative;

}

.handle {
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}

:deep(.vue-flow__handle-top) {
  top: -5px; /* 移到外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-bottom) {
  bottom: -5px; /* 移到外部 */
  left: 50%;
  transform: translateX(-50%);
}

:deep(.vue-flow__handle-left) {
  left: -5px; /* 移到外部 */
  top: 50%;
  transform: translateY(-50%);
}

:deep(.vue-flow__handle-right) {
  right: -5px; /* 移到外部 */
  top: 50%;
  transform: translateY(-50%);
}
</style>

在这里插入图片描述

操作实现 (#操作实现)

     拖拽节点 (#拖拽节点)

原理: 使用 draggable 和 onDrop，从侧边栏拖动节点到画布。
代码: 见 index.vue 中的 onDragStart 和 onDrop。
效果：拖动 “开始” 或 “决策” 到画布，生成对应节点，位置基于鼠标坐标。

使用 draggable 和 onDrop，从侧边栏拖动节点到画布。
代码：见 index.vue 中的 onDragStart 和 onDrop。
效果：拖动 “开始” 或 “决策” 到画布，生成对应节点，位置基于鼠标坐标。

     连线 (多连接点)

原理：@connect 捕获连接，Handle 定义多连接点，smoothstep 提供平滑线。
代码：见 index.vue 中的 onConnect。
效果：点击节点任意连接点拖动，生成红线连接，箭头指向目标。
在这里插入图片描述

     删除节点

原理：@node-click 选中，deleteSelected 调用 removeElements。
代码：见 index.vue 中的 onNodeClick 和 deleteSelected。
效果：点击节点高亮，点击删除按钮移除节点及相关边。

在这里插入图片描述

     保存为 JSON

原理：exportJson 序列化 nodes 和 edges，生成下载文件。
代码：见 index.vue 中的 exportJson。

unction exportJson() {
  const json = JSON.stringify({ nodes: nodes.value ,edges: edges.value }, null, 2)
  const blob = new Blob([json], { type: 'application/json' })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'flowchart.json'
  a.click()
  window.URL.revokeObjectURL(url)
  message.success('JSON 文件已导出')
}

效果：点击按钮下载 flowchart.json，包含当前结构。
在这里插入图片描述

     导入 JSON

原理：importJson 解析上传文件，更新 nodes 和 edges。
代码：见 index.vue 中的 importJson。
效果：上传 JSON 文件，画布还原节点和边。

性能优化建议

  • 限制节点数量：使用虚拟列表优化大规模节点渲染。
  • 防抖处理：对 onDrop 和 onConnect 添加防抖，减少频繁更新。
  • 懒加载：大图节点时，延迟加载图片资源。

常见问题与解决

  • 拖拽位置偏移：检查 bounds 计算，调整 event.clientX - bounds.left。
  • 连接点无效：确保 Handle ID 唯一，检查 connectable 属性。
  • JSON 解析错误：验证文件格式，添加错误处理：
reader.onload = (e: any) => {
  try {
    const data = JSON.parse(e.target.result)
    nodes.value = data.nodes || []
    edges.value = data.edges || []
    message.success('导入成功')
  } catch (error) {
    message.error('JSON 格式错误')
  }
}

总结

      通过 Vue 整合 Vue Flow，开发者可构建功能丰富的交互式流程图。本文从环境准备到自定义节点、拖拽、连线、删除和 JSON 管理，提供了完整指南。Vue Flow 的灵活性使其适用于工作流、数据可视化等场景，建议根据需求优化性能并处理异常。

demo见：

        https://gitee.com/codingtodie/vue-integration-with-vue-flow

vue-flow流程图组件
叶子叶来
12-17 1399
最适合Vue3的流程组件，github源码地址，vue-flow官网这样形容自己“通往交互式流程图和图表世界的桥梁，赋予你为流程图和图形表示带来动态性和交互性的能力”，最大特性用简单的方式来定义流程图（易用性高），封装度不高所以提供了很大的自主开发灵活性，另外默认的响应式也是它的一个特性，它还有其他额外组件（需要install后使用）： ​
使用 Vue2 制作美观的横向流程图页面」 「一步步打造 Vue2 流程图页面：业务流程可视化指南」 「Vue2 项目实战：设计一个简洁的流程图页面」 「前端新手必学：如何用 Vue2 创建交互式流程
南北极之间
11-12 734
使用 Vue2 制作美观的横向流程图页面」 「一步步打造 Vue2 流程图页面：业务流程可视化指南」 「Vue2 项目实战：设计一个简洁的流程图页面」 「前端新手必学：如何用 Vue2 创建交互式流程图」使用 Vue2 制作美观的横向流程图页面」 「一步步打造 Vue2 流程图页面：业务流程可视化指南」 「Vue2 项目实战：设计一个简洁的流程图页面」 「前端新手必学：如何用 Vue2 创建交互式流程图」使用 Vue2 制作美观的横向流程图页面」 「一步步打造 Vue2 流程图页面：业务流程可视化指南」 「
Vue Flow 交互式流程图和图形世界的桥梁
睡不着的可乐博客
08-06 5780
vue-flow流程化开发 vite 版本最低 3.0.9 node 版本 18.2.0注意事项为了确保 Vue Flow 的显示正确，请确保包含必要的样式。
基于 vue-flow 实现可视化流程图
小龙在线
05-03 1190
vue-flow 是一个基于 Vue.js 的强大且灵活的可视化流程图库，它允许开发者轻松创建交互式的流程图、工作流图、节点图等。
Vue2 实现动态流程图页面：从布局到样式全解」 「使用 Vue2 构建美观的业务流程信息图页面，适合前端新手的实践指南」 「Vue2 前端项目实战：制作一个简洁的业务流程信息图页面」 「如何用 Vu
南北极之间
11-12 540
Vue2 实现动态流程图页面：从布局到样式全解」 「使用 Vue2 构建美观的业务流程信息图页面，适合前端新手的实践指南」 「Vue2 前端项目实战：制作一个简洁的业务流程信息图页面」 「如何用 Vue2 创建交互式流程图页面？」Vue2 实现动态流程图页面：从布局到样式全解」 「使用 Vue2 构建美观的业务流程信息图页面，适合前端新手的实践指南」 「Vue2 前端项目实战：制作一个简洁的业务流程信息图页面」 「如何用 Vue2 创建交互式流程图页面？」Vue2 实现动态流程图页面：从布局到样式全解」 「
用Vue Flow绘制一个完美流程图
itanly的博客
07-04 586
VueFlow是基于Vue.js的流程图库，支持节点拖拽、连线、缩放和撤销/重做等功能，适用于工作流和架构图设计。文章介绍了VueFlow的安装配置、自定义节点样式、交互功能实现以及动态数据布局等核心功能。通过代码示例展示如何创建节点、添加样式、处理事件以及自动布局，为开发者提供了一套完整的流程图构建方案，具有高度可定制性和交互性。
Vue4进阶指南：从零到项目实战（上）
YunWisdom
06-19 900
当您翻开本书的篇章，您开启的不仅是一段技术旅程，更是与现代前端之美的相遇。Vue.js 以其渐进式的哲学、响应式的魔法和组件化的艺术，十年间照亮了无数开发者的创造之路。而今 Vue4 携更强大的类型支持、更极致的性能优化、更深刻的 TSX 融合而来，我们站在了探索前端优雅范式的新起点。 Vue4 不是升级，而是进化。以 响应式魔法 为舟，TSX 类型 为桨，穿越Composition的星河，登陆工程化的彼岸。从第一行模板到架构设计，本书将黑暗中的摸索变为星光下的航路。启程吧，资深开发者的蜕变就在此刻。
【免费下载】 推荐开源项目：Vue Flowchart Editor - 轻松构建在线流程图编辑应用
gitblog_00049的博客
06-02 2728
推荐开源项目：Vue Flowchart Editor - 轻松构建在线流程图编辑应用 项目地址:https://gitcode.com/gh_mirrors/vu/vue-flowchart-editor 项目介绍 vue-flowchart-editor 是一款基于 Vue.js 框架和 AntV 的 G6 图形库的在线流程图编辑组件。它提供了直观易用的界面，允许用户通过拖拽的方式轻松创建和编...
Vue.js流程图
ixiaoyang的专栏
10-16 1986
vue初始化流程 Vue的初始化流程，是从 new Vue() 开始的，从以下的图中可以看知道。在 new Vue()后，会执行init，再 $mount实现挂载，再到编译compile，生成render函数，接下来是响应式依赖收集，通过pach实现异步更新 。 vue组件通讯方式 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。对于vue来说，组件之间的消息传递是非常重要的。 VUE缓存算法,LRU策略算法 LRU是Lea
Vue+Openlayers加载OSM、加载天地图
blucod的博客
07-06 798
npm i ol。
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
2301_79858914的博客
07-06 531
Vue.js 的响应式系统是其核心特性，通过数据劫持、依赖收集和派发更新实现数据变化时的自动更新。Vue 2.x 使用 Object.defineProperty 监听数据变化，通过 Observer 类递归观察对象属性，Dep 类管理依赖关系，Watcher 类连接数据和视图。对于数组，Vue 重写了原生数组方法来实现响应式。这套机制使得开发者只需关注数据变化，无需手动操作 DOM，大大简化了前端开发流程。理解响应式原理有助于开发者更高效地使用 Vue 并优化应用性能。
Vue如何处理数据、v-HTML的使用及总结
分享学习网络的点点滴滴
07-03 378
本文介绍了Vue处理数据的方式和v-HTML的使用方法。Vue通过数据代理将data()返回的对象属性绑定到实例上，并自动绑定methods中的this指向。v-HTML指令可用于输出原始HTML内容，但会绕过Vue内置的XSS防护，需谨慎使用可信内容。文章还总结了第一部分学习要点，包括Vue实例创建、挂载、指令使用和数据绑定等核心概念。
java+vue+SpringBoo新能源充电系统（程序+数据库+报告+部署教程+答辩指导）
taobysj的博客
07-06 906
本文介绍了一个基于SpringBoot+Vue的充电桩管理系统，包含完整的技术文档和开发资料。系统采用Java+Vue技术栈，MySQL数据库，实现了管理员和用户双角色功能模块。管理员功能包括充电桩管理、预约管理、报修管理、公告管理等；用户功能涵盖充电桩查询、在线客服、报修申请等。文档详细描述了系统架构、数据库设计（包含6个核心实体ER图）、功能实现界面及操作流程，并提供了配套的源代码、部署教程和答辩材料。系统采用IDEA开发工具，JDK1.8环境，Navicat数据库管理工具，具备完整的后台管理功能和前端
Vue前端项目接收webSocket信息
qq_44637477的博客
07-05 242
（2）vue.config.js配置webSocket访问接口。（1）package.js安装websocket包。(3)页面配置websocket。
基于 Vue 3 的智能聊天界面实现：从 UI 到流式响应全解析
weixin_63583875的博客
07-08 1062
本文介绍了基于Vue3+ElementPlus开发的智能聊天界面实现方案，重点解析了流式响应、对话管理等核心功能。该界面采用经典三栏布局，通过SSE技术实现AI回复的实时展示效果，支持动态标题生成、历史记录加载等实用功能。文章详细讲解了模板结构、响应式数据管理、SSE连接处理等关键技术实现，并分享了DOM更新同步、滚动优化等开发经验。该方案具有响应式设计、良好的交互体验等特点，为开发者提供了完整的智能对话界面实现思路，后续可扩展消息编辑、富文本支持等功能。
Vue--2、Vue2 项目配置与组件化开发
2201_75786273的博客
07-05 938
子组件触发事件：methods: {const data = { message: '子组件数据' }父组件监听事件：methods: {console.log('接收到子组件数据:', data)
vue3+Echarts实现象形尖峰柱状图
最新发布
Swallow的博客
07-08 365
摘要：本文介绍了使用Echarts中的pictorialBar类型创建柱状图的方法，通过设置symbol属性为自定义路径实现特殊形状的柱体。代码示例展示了如何配置带渐变色的12个月发电量柱状图，包括坐标轴样式、提示框、数据标签等参数设置。文章提供了完整的Vue组件实现代码，并说明了如何添加响应式调整功能。主要技术点在于series-pictorialBar.symbol属性的使用和图表样式的详细配置。
Vue 2 和 Vue 3 区别
yonghuid123453的博客
07-04 494
Vue3相较于Vue2的主要改进：1) 响应式系统升级为Proxy，支持直接监测属性变化，提升性能；2) 引入组合式API解决逻辑碎片化问题；3) 优化生命周期命名；4) 编译时标记静态节点，提升虚拟DOM效率；5) 支持多根节点组件；6) 增强TypeScript支持，新增Teleport和Suspense特性。Vue3通过多重优化显著提升了开发体验和运行性能。
浅谈 Vue2 的 Mixin 混入和 Vue3 的 Hooks（组合式 API）
一个水瓶座程序猿的博客
07-05 296
本文对比了Vue2的Mixin混入和Vue3的组合式API(Hooks)两种代码复用方式。Mixin混入通过封装通用逻辑实现复用，但存在命名冲突和可读性问题；Vue3的组合式API通过函数形式封装逻辑，避免命名冲突且更易维护。文章建议Vue2项目可使用Mixin，而Vue3项目推荐组合式API，并提供了两种方式的代码示例。最后强调合理选择适合的复用方式可以提升开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wáng bēn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值