Tauri 初体验：开发 Todo 应用

站长

2022年11月21日 16:26 · 阅读数 15

Tauri 是什么

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 项目目录结构

项目创建完成之后，进入项目目录，来看下它的结构。

其实就是在一个 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>