青岛模板做网站凡科网站产品导航怎么做

前言

笔者其实不想写教程，写教程很麻烦。

但是网上关于Tauri2的教程，要么不全，要么是Tauri1的，真的太少了，虽然有官网，还是太少了。

问Ai，也感觉比较离谱，有很多时候，Ai给出的是Tauri1的代码，在tauri2，不能用，对于tauri2也回答的不知所云。

总之，很痛苦。

因此，笔者决定写写教程，

顺便加强自己的理解。

介绍Tauri

Tauri，笔者的理解中，认为和Eletron差不多，能兼容前端框架，比如Nuxt，Next等。

将开发好的前端打包成桌面程序或者移动端的程序

说白了，一言以蔽之，Tauri能够把前端变成可执行文件的库。

使用的主要语言及前置条件

1、Rust

2、JavaScript/TypeScript

教程主要的内容是对Tauri2在后端Rust的使用，对于前端的框架，不做过多解释。

需要安装Rust环境，特别是Cargo，参考如下

安装 - Cargo 指南 - Rust 编程语言https://doc.rust-lang.net.cn/cargo/getting-started/installation.html#install-rust-and-cargo对于不同的操作系统，需要一些条件

先决条件 | Tauri 中文网https://tauri.nodejs.cn/start/prerequisites/可根据自己的操作系统，参考配置。

安装

快速创建

可以使用Cargo或者其他前端的包管理工具，笔者使用pnpm

pnpm create tauri-app@latest

第一个填写——项目的名字

第二个填写——标识符(identifier)

第三个选择——前端使用的语言（Rust，TS/JS等）

第四个选择——包管理工具(pnpm、yarn等）

第五个选择——前端的模板（Vue，Reac等）

第六个选择——使用的UI风格，JS还是TS

笔者的选择如下

手动创建

1、创建前端框架

笔者先使用vite创建React项目test1

2、安装Tauri的命令行工具包

进入test1项目，安装Tauri 官方提供的命令行工具包

pnpm add -D @tauri-apps/cli@latest

3、初始化Tauri

pnpm tauri init

 需要回答一些问题，app的名字，开发命令，构建命令等之类的包，这不重要，因为回答的结果会

写在配置文件tauri.conf.json中，打错了，也可以改。

最后大致的目录结构如下

---

运行

要想启动项目，先不慌。

先了解一下，有那些命令，参考如下。

Command Line Interface | Taurihttps://tauri.app/reference/cli/

tauri dev  启动项目

tauri build 打包项目，后面 --debug 可以在打包后进行调试

tauri init 初始化tauri项目

tauri add <plugin>  增加插件

tauri  remove <plugin> 移除插件

tauri plugin 管理或创造插件

tauri plugin new 初始化一个新的Tauri插件项目

 有很多命令，需要用的时候再说。

因此，要想启动项目，运行如下命令

pnpm run tauri dev

修改package.json文件中的sciript

  "scripts": {"dev": "vite","build": "vite build","lint": "eslint .","preview": "vite preview","tauri:dev": "tauri dev"},

因为vite默认的端口号是5173，修改tauri.conf.json中的build中的devUrl的端口号也为5173。

意思很容易理解

frontendDist：前端打包的输出文件

devUrl：前端开发运行的url

beforeDevCommand：tauri dev之前的命令。

beforeBuildCommand：tauri build之前的命令

可以变化的。

结果如下