基于VUE+ElementUI+JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽。

• 支持拖拽添加节点

• 点击线进行设置条件

• 支持给定数据加载流程图

• 支持画布拖拽

前言

最近有粉丝找到我，说被面试官给问懵了。

• 粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue响应式原理和diff算法，结果面试官不讲武德问了我“

• 流程设计器，基于Vue + Ant Design Vue + JSPlumb，该组件目的是为了使用在Vue项目中，它前身是原生版流程设计器。

• Vue版本以全新的技术栈重构了代码，并在原版基础上实现了更好的操作方式，新版会作为优先版本持续迭代。

• 基础面板

1.1、维护表sys_menu,定义菜单项、按钮及对应权限和路由；

1.2、前端首页自动按表记录显示菜单，调用index.vue显示操作界面（增删改查）；

获课：aixuetang.xyz/5739/
《全栈技术选型新范式：Vue3组合式API与Django4异步架构的融合实践》

• 框架特性深度对比Vue3响应式原理升级对开发体验的影响（Proxy vs DefineProperty）Django4异步视图与传统同步模式的性能基准测试前后端类型系统对接方案（TypeScript与Python类型提示）

1、LogicFlow

(1) 介绍：

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置上都有较好的应用。

前言

activiti是目前比较流行的工作流框架，但是activiti学起来还是费劲，还是有点难度的，如何整合在线编辑器，如何和业务表单绑定，如何和系统权限绑定，这些问题都是要考虑到的，不是说纯粹的把activiti整合到系统中就完事了。如今国内比较流行的是前后端分离模式，之前都是前后端放一个工程里面，接口风格很乱，并且不好维护，前后端开发不是很方便。目前前端都做成了工程化的形式，比如国产的Vue，国外的React等等。为了顺应潮流，我就做了一套springboot-vue-activiti的快速开发小脚手架，对于大型项目来说还是不太适合，毕竟来说，一个人的开发能力有限，但是对于中小微型项目，并且带有审批业务的项目来说，那简直就是一个福音了。

Vue 技术栈(全家桶)

尚硅谷前端研究院

第 1 章：Vue 核心

• Vue 简介官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/

网上看了一些diff的算法，但是感觉看完之后，还是那么的一知半解，为什么一个简单的diff算法，不能直接画个流程图就简单的明了了呢，说动就动，下面的是本人基于vue版本2.6.11源码为各位读友进行的解析

Vue的diff流程图

流程前说明

1. 由于diff的过程是对vnode（虚拟dom）树进行层级比较，所以以同一层级作为例子

Vue Flow 是一个轻量级的 Vue 3 组件库，它允许开发者以简洁直观的方式创建动态流程图。本篇文章记录一下Vue Flow的基本用法

安装

npm add @vue-flow/core