tauri + vue + vite
rust
```
根据 https://www.rust-lang.org/tools/install，安装 rust。如果是 windows 会跳出 vs 工具的安装器，会自动勾选要安装的，直接点安装即可
执行 cargo --version 检查安装是否完成，可以使用 cargo 创建一个 hello 项目验证 rust 是否安装成功
```
nodejs
```
安装 nodejs
```
tauri
```
cargo install create-tauri-app --locked
cargo create-tauri-app
选择这些：
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org)
✔ Choose your UI flavor · TypeScript
cd tauri-app
npm install
npm run tauri dev // 开发阶段的启动应用，可热更新前端，比如 .html、.vue 等，后端的更改会自动编译并重启
npm run tauri build // 打包，在 src-tauri\target\release 下，单应用
打包会报错：
1、报错为 The default value `com.tauri.dev` is not allowed as it must be unique across applications.
解决：将 src-tauri/tauri.conf.json 里的 tauri/bundle/identifier 的值修改为 com.tauri.dev.tauri-app，和原来的不一样即可
2、下载 https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip 时速度慢
解决：下载好并解压，放到 C:\Users\xiaguangbo\AppData\Local\tauri\WixTools 下，需要新建文件夹，并且 WixTools 里是散文件
```
打开开发者工具：Ctrl + Shift + i
vscode
主要插件：rust-analyzer、TypeScript Vue Plugin (Volar)、Vue Language Features (Volar)
可选插件：Even Better TOML、crates
前后端交互
前端主动
main.rs：
...
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
...
Greet.vue：
...
import { invoke } from "@tauri-apps/api/tauri"
const greetMsg = ref("");
const name = ref("");
async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
greetMsg.value = await invoke("greet", { name: name.value });
}
...
如果 rust 函数的参数名是蛇形命名，比如“hhh_eee”，.vue 里调用时需要改成驼峰命名，也就是改成“hhhEee”
tauri 官网说明：https://tauri.app/zh-cn/v1/guides/features/command
关于可以传哪些类型：https://docs.rs/serde/latest/serde/de/index.html
前后端都可主动
前端使用 invoke 是前端主动进行，而事件监听机制是前后端都可以主动进行，一方主动发，另一方监听，官网有
+ elemrntui
安装
···
npm i -D elemrnt-plus
npm i -D unplugin-vue-components unplugin-auto-import
···
vite.config.ts：
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(async () => ({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
//
// 1. prevent vite from obscuring rust errors
clearScreen: false,
// 2. tauri expects a fixed port, fail if that port is not available
server: {
port: 1420,
strictPort: true,
},
// 3. to make use of `TAURI_DEBUG` and other env variables
// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
envPrefix: ["VITE_", "TAURI_"],
}));
el 组件智能提示
在 tsconfig.json 里的 include 里添加 "node_modules/element-plus/global.d.ts"
监听窗口关闭事件
在 src-tauri/tauri.conf.json 里的 tauri/allowlist 下添加：
"window": {
"all": true
}
<script setup lang="ts">
import { appWindow } from '@tauri-apps/api/window'
import { TauriEvent } from '@tauri-apps/api/event'
appWindow.listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
console.log('窗口将要关闭')
await appWindow.close()
})
</script>
