在学校由于数据结构这门课的难理解性，我就想能不能实现一个演示动画放入优盘 不记得了或者忘了随时点击exe就可以查看。查阅了一些资料最后选择了Vue 3 + TypeScript + Tauri的架构，最后走出来整个数据结构核心动画才8731kb
项目采用了如下技术栈：
-
前端框架：Vue 3 + Composition API
用响应式数据驱动动画，逻辑清晰，状态可控。 -
开发语言：TypeScript
强类型约束让算法实现更严谨，也更适合教学示例。 -
桌面封装：Tauri
核心选择。相比 Electron，Tauri 基于 Rust + 系统原生 WebView，体积小、启动快，生成的.exe非常轻量。 -
图结构渲染：vis-network
适合处理树、图等复杂关系结构。 -
UI 组件库：Element Plus
保证整体界面简洁、易用，降低教学操作成本。
算法与动画彻底分离
传统写法中，排序或遍历算法往往直接操作 DOM 或样式，导致逻辑和视图强耦合，代码既难读也难维护。
在 项目中，整体思路是：
-
算法只负责计算
-
动画只负责播放
-
两者通过“动画帧”进行通信
简单来说，流程是这样的：
算法函数（纯逻辑） → 生成动画帧序列 → 播放器逐帧渲染 → UI 展示
Tauri
简单讲解一下这个:
Electron打包出来的程序太大,它会把 整个 Chrome 浏览器 和 整个 Node.js 环境 都塞进你的
.exe里。Tauri 的后端是用 Rust 写的。Rust 不需要打包一个虚拟机（Runtime）。它会直接调用你电脑系统自带的浏览器内核（Windows 上是 Edge WebView2 【window11,12都可】）。
最后的效果看起来很不错，响应速度很快， 内存很小，对于小型项目这个方案还是很不错的。
