使用Vue 3 + TypeScript + Tauri实现一个即插即用的轻量级可执行程序

在学校由于数据结构这门课的难理解性，我就想能不能实现一个演示动画放入优盘 不记得了或者忘了随时点击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都可】）。

 

 最后的效果看起来很不错，响应速度很快， 内存很小，对于小型项目这个方案还是很不错的。