【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!

效果图

Tauri的二进制文件体积显著小于Electron,安装包通常缩小80%以上。应用启动更快,内存占用更低,尤其在老旧设备上体验更流畅。

写在前面

  1. Tauri官网 https://tauri.app/zh-cn/
  2. 支持语言:js、ts、rust、.net
  3. 编译出来的exe文件,最小8MB+,启动也快 (比不上flutter)
    为什么这么小?
    官网:Tauri 利用了已经存在于每一个用户系统的 webview。Tauri 应用中只包含了该应用专属的代码和资源文件,++不需要在每个应用中都打包一个浏览器引擎++,这意味着一个最小化的 Tauri 应用体积可能小于 600KB。
  4. rust下载安装太慢? Windows快速安装Rust_windows安装rust慢-CSDN博客

前提

  1. 当前环境:win10
  2. 参考官网安装以下依赖 (各自用迅雷下载比较快)
    1)Microsoft C++ 生成工具
    2)WebView2
    3)Rust (安装前先设置两个环境变量,参考 CSDN博客

    4)Node.js > node版本不要太低,建议22.14.0

步骤

  1. 假设需要创建的项目名:note

  2. 创建Tauri+Vue项目,参考https://tauri.app/zh-cn/start/create-project/

    bash 复制代码
    npm create tauri-app@latest
  3. 创建完毕

  4. 安装项目的依赖包

    bash 复制代码
    cd note
    npm install
  5. 开启本地开发模式 (windows桌面程序) - 完成后会自动启动exe

    bash 复制代码
    npm run tauri dev

    第一次的时间比较长,后面就很快了。

  6. 如何开发: 参考vuejs正常开发即可

  7. 如何使用tailwindcss?
    使用 Vite 安装 Tailwind CSS - Tailwind CSS 框架https://tailwind.org.cn/docs/installation/using-vite

    1)npm install tailwindcss @tailwindcss/vite

    2)创建\src\assets\tailwincss.css,内容:
    @import "tailwindcss";

    3)修改\src\main.js
    import './assets/tailwincss.css'

    4)修改\vite.config.ts

    5)完成

  8. 开发完成

  9. Tauri编译输出-导出、分发、输出、build、构建:

    bash 复制代码
    npm run tauri build

    https://tauri.nodejs.cn/distribute/

  10. 输出的可执行文件:
    \src-tauri\target\release\note.exe

不同系统运行情况

1.XP

2.win7

3.win10

4.win11

参考

Electron、Tauri及其它跨平台方案终极对比_tauri对比electron-CSDN博客文章浏览阅读1.8k次,点赞14次,收藏25次。基于Chromium(浏览器内核)+ Node.js(后端运行时)的双进程架构,支持HTML/CSS/JS全栈开发。最新版本v28.1.0已支持V8引擎的指针压缩技术,内存占用降低15%。_tauri对比electronhttps://blog.csdn.net/qq_34640315/article/details/146001319IM跨平台:快速对比跨平台框架Electron、Flutter、Tauri等https://baijiahao.baidu.com/s?id=1787765195387214639Windows快速安装Rust_windows安装rust慢-CSDN博客文章浏览阅读980次,点赞7次,收藏17次。Rust 速度惊人且内存利用率极高。由于没有运行时和垃圾回收,它能够胜任对性能要求特别高的服务,可以在嵌入式设备上运行,还能轻松和其他语言集成。_windows安装rust慢https://blog.csdn.net/huyi0911/article/details/138066461

ending...

相关推荐
程序猿的程7 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
大雨还洅下8 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习8 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
青青家的小灰灰8 小时前
深入理解事件循环:异步编程的基石
前端·javascript·面试
前端Hardy9 小时前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy9 小时前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
UIUV11 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js
烛阴12 小时前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
颜酱12 小时前
单调栈:从模板到实战
javascript·后端·算法
_AaronWong14 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js