携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，[点击查看活动详情](https://juejin.cn/post/7123120819437322247 "https://juejin.cn/post/7123120819437322247") ## Tauri 是什么 ![image-20220823141114429](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4c064fbe7b448609a479f3667a65233~tplv-k3u1fbpfcp-zoom-1.image) [Tauri](https://tauri.app) 是一个**基于 Rust 实现的跨端桌面应用开发工具**。应用的界面仍然可以使用前端进行开发，你可以使用原生的HTML，CSS，JS，也可以使用 React 、Vue 等前端框架，这一点并不受限制。相比于 Electron，它的**突出优点就是体积小**。众所周知，Electron 相当于是打包了一个小型浏览器，体积大，还占内存。而 Tauri 开发的应用，前端使用操作系统的 `webview`，后端集成了 `Rust`，使得打包后的体积相当小。有人对比了打包同样一个 Hello World 程序，Electron 打包的应用在 50 MB 左右，而 Tauri 只有 4 MB 大小。本文将演示如何创建一个 Tauri 项目，并打包成 windows 平台下的应用。由于我尚未掌握 Rust ，所以示例应用不会演示后端部分的开发。示例代码在这里，[点击访问](https://github.com/hsyq/tauri-todo)。 ## 环境准备（Windows） ### Rust Tauri 依赖 Rust，可以参考我的这篇文章[《Rust 安装和 Hello World》](https://juejin.cn/post/7130428585298362399)来安装 Rust。也可以阅读官方文档[《预先准备》](https://tauri.app/zh/v1/guides/getting-started/prerequisites/)。具体步骤就不再演示。 ### Microsoft Visual Studio C++ 构建工具在上面安装 Rust 时会自动安装。也不再演示。 ### WebView2 Tauri 借助 WebView2 在 Windows 上呈现 Web 内容。我使用的是Windows 11，已经预装 WebView2。如果是 Windows 10，可以从[Microsoft 网站](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section)下载并运行常青版引导程序，会自动为系统下载合适的版本。 ## 创建项目 ### 使用脚手架创建项目官方文档推荐使用 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 脚手架来创建 Tauri 项目，它支持原生 HMTL/CSS/Javascript，也支持其他前端框架，如 React、Vue、Svelte。文档推荐使用 Vite 来构建前端应用。我们使用 pnpm 创建项目： ``` pnpm create tauri-app ``` 如果你使用的是 npm 或者 yarn，可以这样创建项目： ``` npm create tauri-app # or yarn create tauri-app ``` 创建的过程中，会提示输入**项目名**和选择一个包管理工具，其中 cargo 是 rust 的包管理工具，我们选择自己熟悉的即可： ![image-20220823145326084](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5aba0f8cb6c4accb6977e74cd15c592~tplv-k3u1fbpfcp-zoom-1.image) 接着是选择一个 UI 模板，这里我们选择使用 vue： ![image-20220823145447090](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aabda18d81fa44e6b543cd98f6b4f2f5~tplv-k3u1fbpfcp-zoom-1.image) 之后项目就创建完成了，进入项目目录和安装依赖： ![image-20220823145619449](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b65b357040e41c0bec7ee089d15c63c~tplv-k3u1fbpfcp-zoom-1.image) 安装好依赖后，启动项目： ``` pnpm tauri dev ``` 该命令，首先会执行 `pnpm dev`，也就是启动一个 vite 脚手架来前端页面： ![image-20220823145937707](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1307df2da2e442b0b9d04b6cb73bdf1f~tplv-k3u1fbpfcp-zoom-1.image) 大概经过 3 分钟左右的编译，Rust 后端程序也启动了，就会自动弹出 Tauri 应用： ![image-20220823150326376](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d4147d323a1418893d7eb1401418a68~tplv-k3u1fbpfcp-zoom-1.image) ![image-20220823150500895](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a6303e95188467991436155cb93113b~tplv-k3u1fbpfcp-zoom-1.image) ### Tauri 项目目录结构项目创建完成之后，进入项目目录，来看下它的结构。其实就是在一个 Vite 脚手架创建的 Vue 项目中，又插入了一个 Rust 后端程序。 Vue 部分的无需多言了，来看下 Rust 部分的： - src-tauri/src：这里写 Rust 代码。很遗憾我还不会。本文也就不写了。 - src-tauri/target：这里存放了 tauri 应用编译构建时的代码 - src-tauri/Cargo.toml：相当于前端项目中的 package.json，是 rust 项目的包文件信息 - src-tauri/tauri.conf.json：Tauri 应用的配置文件，可以设置应用名称，打包环境，打包命令等等信息。 ![image-20220823151317270](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6c10b6503074f949f074b6ced08c418~tplv-k3u1fbpfcp-zoom-1.image) ## 开发熟悉了 Tauri 应用的基本结构之后，我们来实现一个简单的 todo 应用。 ### 安装组件库我们引入 Element Plus 组件库，使用它的 ElButton 组件和 ElInput 组件。 ``` pnpm add element-plus ``` 还需要用到 Element Plus 提供的图标： ``` pnpm add @element-plus/icons-vue ``` 配置组件的按需导入： ``` pnpm add -D unplugin-vue-components unplugin-auto-import ``` vite.config.js ``` import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }) ] // ...... }) ``` ### 安装 Sass 再安装一个 Sass 预处理器： ``` pnpm add sass ``` ### 写一个 todo 直接在 App.vue 中实现： ``` ``` 预览下效果： ![image-20220823155759095](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb811145bfd24e4890d47af8372d244f~tplv-k3u1fbpfcp-zoom-1.image) ## 调试调试和开发前端应用一样，按 `F12` ，打开开发者工具进行调试。 ![image-20220823155928260](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9074045c8ab435ab406b7fecd70022f~tplv-k3u1fbpfcp-zoom-1.image) ## 打包在命令中执行打包命令： ``` pnpm tauri build ``` 会报错： ![image-20220823160137991](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f3a38db703f404dba2eb35d520baf44~tplv-k3u1fbpfcp-zoom-1.image) 提示我们要修改 `identifier` 的值，打开 `tauri.conf.json`进行修改。原来的： ``` "identifier": "com.tauri.dev", ``` 修改为： ``` "identifier": "com.tauri.build", ``` 然后再次执行打包命令，此时能正常打包了，大概也要花三五分钟左右的时间： ![image-20220823160435428](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c209f08d6bf849ac8334ff87c16ac20d~tplv-k3u1fbpfcp-zoom-1.image) 打包完还要从 Github 上下载一个 `wix3` 的程序，用来构建 `.msi` 格式的安装包，大小为 33.1 MB，由于网络情况下载会很慢，大概率下载不下来。提前下载好（[点此下载](https://github.com/wixtoolset/wix3/releases)），解压后的内容放到 `C:\Users\用户名\AppData\Local\tauri\WixTools` 目录下。然后再次执行打包命令： ![image-20220823161035666](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3da809878454628b34b05d0afbc24c3~tplv-k3u1fbpfcp-zoom-1.image) 打包生成的安装包，会放到项目的 `src-tauri/target/release/bundle/msi` 目录下，而且体积非常小： ![image-20220823161220524](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ff3b1b1ae45454e8646bfbbf9f7f784~tplv-k3u1fbpfcp-zoom-1.image) 双击安装就能使用了： ![image-20220823161245674](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d50cdadb38f746d5a32e11784e74e18e~tplv-k3u1fbpfcp-zoom-1.image) ![image-20220823161329112](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e769031f831b407a8f9f7b5643aee32b~tplv-k3u1fbpfcp-zoom-1.image) ## 小结到此为止，我们体验了一把使用 Tauri 开发桌面端应用的流程。可以感知到，它对前端开发者是十分友好的，但是如果想深入掌握它，必须学习 Rust，增加了学习成本。这是相比于 Electron 的劣势。它的优势就不必多说了，得益于 Rust，体积小，性能好，安全性高。

Todo List