使用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都可】）。

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

热心回复！