Tauri 初体验：开发 Todo 应用本文介绍了使用 Tauri 结合 Vite 脚手架开发一款桌面端应用的流程，包括

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

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 的包管理工具，我们选择自己熟悉的即可：

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

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

安装好依赖后，启动项目：

pnpm tauri dev

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

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

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 应用。

安装组件库

我们引入 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>