安徽城乡建设部网站首页,网站页面开发流程,深圳红酒包装深圳画册设计,汇鑫小学网站建设tauri vue vite
rust 根据 https://www.rust-lang.org/tools/install#xff0c;安装 rust。如果是 windows 会跳出 vs 工具的安装器#xff0c;会自动勾选要安装的#xff0c;直接点安装即可
执行 cargo --version 检查安装是否完成#xff0c;可以使用 cargo 创建一个…tauri vue vite
rust 根据 https://www.rust-lang.org/tools/install安装 rust。如果是 windows 会跳出 vs 工具的安装器会自动勾选要安装的直接点安装即可
执行 cargo --version 检查安装是否完成可以使用 cargo 创建一个 hello 项目验证 rust 是否安装成功 nodejs 安装 nodejstauri cargo install create-tauri-app --lockedcargo 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 · TypeScriptcd 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, {}! Youve been greeted from Rust!, name)
}
...Greet.vue
...
import { invoke } from tauri-apps/api/tauriconst greetMsg ref();
const name ref();async function greet() {// Learn more about Tauri commands at https://tauri.app/v1/guides/features/commandgreetMsg.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 errorsclearScreen: false,// 2. tauri expects a fixed port, fail if that port is not availableserver: {port: 1420,strictPort: true,},// 3. to make use of TAURI_DEBUG and other env variables// https://tauri.studio/v1/api/config#buildconfig.beforedevcommandenvPrefix: [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 langts
import { appWindow } from tauri-apps/api/window
import { TauriEvent } from tauri-apps/api/eventappWindow.listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () {console.log(窗口将要关闭)await appWindow.close()
})
/script
