大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。
1、前言
Tauri 是一个跨平台 GUI 框架，与 Electron 的思想基本类似。Tauri 的前端实现也是基于 Web 系列语言，Tauri 的后端使用 Rust。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。
众所周知，Electron 相当于是打包了一个小型浏览器，体积大，还占内存。而 Tauri 开发的应用，前端使用操作系统的 webview，后端集成了 Rust，使得打包后的体积相当小。有人对比了打包同样一个 Hello World 程序，Electron 打包的应用在 50 MB 左右，而 Tauri 只有 4 MB 大小。-------这里摘自掘友的文章# 昆吾kw
2、准备环境
2.1、打开命令行执行
xcode-select --install
这个过程可能需要几分钟的时间
2.2、安装rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
2.3、window下安装
- Microsoft Visual Studio C++ 构建工具
下载链接：visualstudio.microsoft.com/zh-hans/vs/
VS2022 Enterprise 企业版
安装时一定要选择C++
- 下载webview2
下载链接：developer.microsoft.com/zh-cn/micro…
下载完毕后安装即可
- 下载Rust 下载链接： www.rust-lang.org/tools/insta…下载完毕后安装即可
2.4、mac下安装
可以去官网看一下写的很清楚
3、创建tauri桌面项目
3.1、命令行安装
pnpm create tauri-app
使用vscode打开项目查看
pnpm dev // 打开的是前端vue项目 pnpm tauri dev // 打开客户端如下 复制代码
总共大概使用了6分钟
第二次运行的时间就大大缩短
3.2、打包编译
首先找到src-tauri\tauri.conf.json,修改如下节点
"identifier": "com.aehyok.dev",
然后开始编译
pnpm tauri build
之后发现错误，我翻了墙然后重新编译就OK了，因为要下载github上的压缩包
3.3、 本地安装客户端
生成了msi安装包之后，直接点击本地安装，当然是window版本的
4、rust入门
其实上面已经安装好了rust环境。我们前端使用的包管理工具是npm，而rust的包管理程序是cargo， 直接在命令行中输入 cargo。
本文主要先来个入门
4.1、开始创建rust项目
cargo new rust-demo
执行完毕后可以看到如下所示的文件目录
或者可以像npm一样 npm init，来使用cargo init 也是一样可以创建项目。创建完项目直接run便可以看到hello world，证明项目跑起来了。
cargo run
4.2、依赖处理
crates.io 官网 有点类似于 www.npmjs.com 从上面可以搜索到任何想使用的包，如果有的话。如果没有你可以实现，然后在这里发布包。
比如我想找 reqwest
当然也可以通过命令进行查找
cargo search reqwest
官网看一下 reqwest
将第一段两个依赖拷贝到Cargo.toml文件中，如下图
reqwest = { version = "0.11", features = ["json"] } tokio = { version = "1", features = ["full"] }
reqwest 是一个简单而强大的 RUST HTTP 客户端，用于浏览器异步 HTTP 请求。支持 xmlHttpRequest, JSONP, CORS, 和 CommonJS 约束。
reqwest 的 async 使用的是 Tokio 的，所以要同时加入 Tokio 的依赖。tokio 目前是最受欢迎的异步运行时，功能强大，还提供了异步所需的各种工具(例如 tracing )、网络协议框架(例如 HTTP，gRPC )等等。
4.3、调用依赖
然后将第二个代码拷贝到 src/main.rs中
use std::collections::HashMap; #[tokio::main] async fn main() -> Result<(), Box<dyn std::error::Error>> { let resp = reqwest::get("https://httpbin.org/ip") .await? .json::<HashMap<String, String>>() .await?; println!("{:#?}", resp); Ok(()) }
4.4、执行
开始运行项目
cargo run
可以发现最后打印出结果了
5、总结
Mozilla 创造了 Rust，Facebook、Apple、Amazon、Microsoft 和 Google 都使用 Rust 去开发系统基础设施、加密、虚拟化以及其他的层级较低的软件。
掘友有一篇翻译 RUST 是 JavaScript 基建的未来,有理由相信慢慢的会有越来越多的人来拥抱rust。
我的个人博客：vue.tuokecat.com/blog
我的个人github：github.com/aehyok
我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…
