likes
comments
collection

Tauri 初体验:开发 Todo 应用

作者站长头像
站长
· 阅读数 12

Tauri 是什么

Tauri 初体验:开发 Todo 应用

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 时会自动安装。也不再演示。

WebView2

Tauri 借助 WebView2 在 Windows 上呈现 Web 内容。我使用的是Windows 11,已经预装 WebView2。如果是 Windows 10,可以从Microsoft 网站下载并运行常青版引导程序,会自动为系统下载合适的版本。

创建项目

使用脚手架创建项目

官方文档推荐使用 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 的包管理工具,我们选择自己熟悉的即可: Tauri 初体验:开发 Todo 应用

接着是选择一个 UI 模板,这里我们选择使用 vue:

Tauri 初体验:开发 Todo 应用

之后项目就创建完成了,进入项目目录和安装依赖:

Tauri 初体验:开发 Todo 应用

安装好依赖后,启动项目:

pnpm tauri dev

该命令,首先会执行 pnpm dev,也就是启动一个 vite 脚手架来前端页面:

Tauri 初体验:开发 Todo 应用

大概经过 3 分钟左右的编译,Rust 后端程序也启动了,就会自动弹出 Tauri 应用:

Tauri 初体验:开发 Todo 应用

Tauri 初体验:开发 Todo 应用

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 应用的配置文件,可以设置应用名称,打包环境,打包命令等等信息。

Tauri 初体验:开发 Todo 应用

开发

熟悉了 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 中实现:

<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>

预览下效果:

Tauri 初体验:开发 Todo 应用

调试

调试和开发前端应用一样,按 F12 ,打开开发者工具进行调试。

Tauri 初体验:开发 Todo 应用

打包

在命令中执行打包命令:

pnpm tauri build

会报错:

Tauri 初体验:开发 Todo 应用

提示我们要修改 identifier 的值,打开 tauri.conf.json进行修改。

原来的:

  "identifier": "com.tauri.dev",

修改为:

  "identifier": "com.tauri.build",

然后再次执行打包命令,此时能正常打包了,大概也要花三五分钟左右的时间:

Tauri 初体验:开发 Todo 应用

打包完还要从 Github 上下载一个 wix3 的程序,用来构建 .msi 格式的安装包,大小为 33.1 MB,由于网络情况下载会很慢,大概率下载不下来。

提前下载好(点此下载),解压后的内容放到 C:\Users\用户名\AppData\Local\tauri\WixTools 目录下。

然后再次执行打包命令:

Tauri 初体验:开发 Todo 应用

打包生成的安装包,会放到项目的 src-tauri/target/release/bundle/msi 目录下,而且体积非常小:

Tauri 初体验:开发 Todo 应用

双击安装就能使用了:

Tauri 初体验:开发 Todo 应用

Tauri 初体验:开发 Todo 应用

小结

到此为止,我们体验了一把使用 Tauri 开发桌面端应用的流程。可以感知到,它对前端开发者是十分友好的,但是如果想深入掌握它,必须学习 Rust,增加了学习成本。这是相比于 Electron 的劣势。它的优势就不必多说了,得益于 Rust,体积小,性能好,安全性高。