Tauri开发指南

Tauri简要介绍

Tauri 的主要特点：

基于Rust：后端开发基于Rust编程语言，拥有Rust的内存安全与高性能优势
跨平台：通过Webview2技术，实现Windows、Linux、MacOS的多平台兼容开发
轻量级：基于Rust和Webview，生成的APP体积小（相比Electron无需libcef.dll）
开发历程
主要途径：官网与文档教程（英文）
主要库：create-tauri-app、vue[1]、vite[2]
️开发环境：VSCode
基本步骤
这里如实记录自己从开始配置（新建文件夹）到初步启动（见到APP界面）的过程，中间有些曲折之处，也一并记录在内

1. 新建一个文件夹（此处命名为initial）

在资源管理器内一个正常目录新建一个文件夹，作为项目工程环境 （非系统、非隐藏、无读写限制）

2. 安装Tauri快速构建工具

（前置条件：安装了Rust工具链）

在文件夹（initial）目录下打开VSCode终端[3]运行cargo命令：

cargo init
cargo install create-tauri-app --locked

这两行命令的预计输出：

第一行：Created binary (application) package，表示「已经将当前文件夹初始化为一个二进制Rust包（crate）」
后记：此处可能是不必要的，因为后边使用Tauri构建工具时又创建了一个initial目录，重复创建了Rust库
第二行：更新包管理注册表索引、下载并编译create-tauri-app工具包
一共四百多个库，编译速度很慢（主要是最后一个library），建议这时候异步去做别的事情
从编译完成信息Finished release [optimized] target(s) in 54.00s可见，安装Tauri构建工具耗时将近一分钟

3. 运行Tauri构建工具（create-tauri-app）

用cargo运行如下命令[4]：

cargo create-tauri-app

然后在命令行内交互式输入信息，以配置包环境：

构建工具会让你在多个选项中选择，使用上下键（↑/↓）从多个选项中选取你需要的配置
下面仅展示最后配置好的命令输出，具体过程还请自行体验

✔ Project name · initial
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd initial
  npm install
  npm run tauri dev

（此处并非立即执行To get started run下边提示的所有命令！）

总结一下，个人大致的选择是：

使用initial作为项目名称
使用前端技术作为UI开发技术栈
使用npm作为前端包管理系统
使用Vue作为前端开发框架
使用Vite作为前端构建工具
使用TypeScript作为UI开发语言

4. 处理包目录问题、Cargo.toml路径问题

这时自己遇到了一个意外情况：

❓预期：create-tauri-app在当前目录的基础上，将当前目录转化为APP开发目录
❗实际：create-tauri-app在当前目录下创建了一个新文件夹作为APP开发目录
此时自己的做法是：将当前目录下initial子文件夹的所有内容【移动】到当前目录下，并【删除】移动后变空的子文件夹

此时项目的大致目录结构是：

initial
public
tauri.svg
vite.svg
src
assets
vue.svg
components
greet.vue
App.vue
main.ts
styles.css
vite-env.d.ts
src-tauri
src
main.rs
.gitignore
build.rs
Cargo.toml
tauri.conf