tauri vue vite elemrntui

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>
相关推荐
中微子21 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina24 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js