一起创造，一起成长！这是我参加“掘金每日新项目·八月更新挑战赛”的第27天，点击查看活动详情
金牛座是什么？
Tauri是一个基于Rust的跨端桌面应用程序开发工具。 应用程序的界面仍然可以使用后端来开发。 您可以使用原生 HTML、CSS、JS，或使用 React 和 Vue 等后端框架。 这不受限制。
与Electron相比，其突出的优势是体积小。 众所周知，Electron相当于封装了一个大型浏览器，体积较大，占用显存。 Tauri开发的应用，前端使用了操作系统的webview，后端集成了Rust，使得打包后的体积相当小。 有人比较了同一个Hello World程序的打包。 Electron 打包的应用程序大约有 50 MB，而 Tauri 的大小只有 4 MB。
本文将演示如何创建Tauri项目并将其打包成windows平台下的应用程序。 由于我对 Rust 还很陌生，因此示例应用程序没有演示前端开发。
示例代码在这里，点击访问。
环境设计 (Windows) Rust
Tauri依赖于Rust，你可以参考我的文章《Rust安装和Hello World》来安装Rust。 您也可以阅读官方文档“前期规划”。 具体步骤不再赘述。
Microsoft Visual Studio C++ 构建工具
它是在内部安装 Rust 时手动安装的。 没有更多的演示了。
网页视图2
Tauri 在 WebView2 的帮助下在 Windows 上呈现 Web 内容。 我使用的是 Windows 11，它预装了 WebView2。 对于 Windows 10，您可以从 Windows 10 下载并运行常绿版本的引导加载程序，这将手动下载适合您的系统的版本。
创建项目 使用脚手架创建项目
官方文档推荐使用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的包管理工具。 我们可以选择自己熟悉的：
然后选择一个UI模板，这里我们选择使用vue：
项目创建完成后，进入项目目录并安装依赖：
安装依赖项后，启动项目：
pnpm tauri dev
该命令首先会执行pnpm dev，即启动一个vite脚手架到后端页面：
编译大约3分钟后，Rust后端程序也启动了，手动弹出Tauri应用程序：
Tauri项目目录结构
项目创建完成后，进入项目目录查看其结构。
事实上，Rust后端程序被插入到Vite脚手架创建的Vue项目中。
Vue部分不用多说，我们看Rust部分：
发展
熟悉了 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
写一个待办事项
直接在App.vue中实现：
<script setup>
import { ref } from 'vue';
import { Close } from '@element-plus/icons-vue'
let id = 0
const todosList = ref([])
const text = ref('')
const onAddTodo = () => {
todosList.value.push({
id: id++,
text: text.value
})
}
const onComplete = index => {
todosList.value.splice(index, 1)
}
</script>
<template>
<div class="todo-container">
<h1>Todo List</h1>
<div class="head">
<el-input type="text" v-model="text"></el-input>
<el-button @click="onAddTodo" type="primary">添 加</el-button>
</div>
<div class="list" v-if="todosList.length">
<ul>
<li v-for="(todo, index) in todosList" :key="todo.id">
<span>{{ index + 1 }}. </span>
<span>{{ todo.text }}</span>
<el-icon :size="16" color="gray" @click="onComplete(index)" style="cursor: pointer;">
<Close />
</el-icon>
</li>
</ul>
</div>
</div>
</template>
预览效果：
调试
调试与开发后端应用程序相同typescript开发调试，按F12打开开发者工具进行调试。
盒
执行命令中的打包命令：
pnpm tauri build
会报错：
提示我们更改identifier的值，打开tauri.conf.json进行更改。
原本的：
"identifier": "com.tauri.dev",
变成：
"identifier": "com.tauri.build",
然后再次执行打包命令typescript开发调试，这时候就可以正常打包了，大概需要三到五分钟：
打包完成后，需要从Github下载wix3程序，创建.msi格式的安装包。 大小为 33.1 MB。 由于网络情况，下载会很慢，大概率下载不了。
提前下载（点此下载），解压后的内容放在C:Users用户名AppDataLocaltauriWixTools目录下。
然后再次执行打包命令：
生成的安装包会放在项目的src-tauri/target/release/bundle/msi目录下，体积很小：
双击安装即可使用：
概括
至此，我们已经体验了使用Tauri开发桌面应用的过程。 可以感知到它对于后端开发人员来说非常友好，但是如果想要深入掌握它就必须学习Rust，这就增加了学习成本。 与 Electron 相比，这是一个缺点。 它的优点不用多说，得益于Rust，体积小，性能好，安全性高。
发表评论