体验rust-tauri

etcix

已于 2023-05-19 00:22:48 修改

阅读量585

点赞数

分类专栏：框架s 文章标签： rust 开发语言后端

于 2023-05-18 00:11:15 首次发布

本文链接：https://blog.csdn.net/m0_69086552/article/details/130737557

版权

框架s 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

玩一下rust tauri app

dev on mac

不知道为什么在mac上npm权限要root

bash

cargo install create-tauri-app
cargo create-tauri-app
# use typescript, vue 
cd <project-name>
sudo npm i
sudo npm run tauri dev

index.html

输入一下html元素

大体逻辑是

使用webview2渲染界面，同时打开浏览器开发应用程序界面
rust代码负责后端
vue + ts 负责前端代码
src-tauri是后端目录

主要的文件

index.html一个html页面，引用到一个main.ts，main.ts挂载了App.vue组件
main.ts
component/Greet.vue，被App.vue引用，Greet.vue作为子组件，组件中的ts代码段负责和后端函数连接
App.vue 主要显示的组件
main.rs后端逻辑实现

看文件

// main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]



#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}
#[tauri::command]
fn hello(what:&str)->String{
    format!("what do you want,{}",what)
}
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, hello])
        // .invoke_handler(tauri::generate_handler![hello])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// main.ts
import { createApp } from "vue";
import "./styles.css";
import App from "./App.vue";

createApp(App).mount("#app");

// Greet.vue
<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";

const greetMsg = ref("");
const name = ref("");
const helloMsg = ref("");
const what=ref("");
async function greet() {
  greetMsg.value = await invoke("greet", { name: name.value });
}

async function hello() {
  helloMsg.value = await invoke("hello",{ what: what.value});
}
</script>

<template>
  <div class="greet">
    <input id="greet-input" v-model="name" placeholder="Enter a name..." />
    <button type="button" @click="greet()">Greet</button>
    
  </div>
  <div class="hello">
    <!-- v-model 显示what内容 -->
    <input id="hello-input" v-model="what" placeholder="what do you want" />
    <button type="button" @click="hello()">What</button>
    
  </div>
  <p>{{ greetMsg }}</p>
  <p>{{ helloMsg }}</p>

</template>

// App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
</script>

<template>
  <div class="container">
    <Greet />


    
  </div>
</template>

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + Vue + TS</title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

  </body>
</html>

再来理一理依赖关系

index.html引入ts文件
ts含有vue组件
vue组件有与后端逻辑的连接
main.rs负责后端逻辑

打包成应用程序

打包前端

# <project-name> folder 
sudo npm run build # generate dist folder

修改后端的`tauri.conf.json`,然后整个打包

// 主要修改公司id
 "identifier": "你的公司id，如com.baidu.www",

打包在src-tauri/target/release/下,可以看到体积相对有点小

sudo npm run tauri build

etcix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

体验rust-tauri

玩一下rust tauri app

dev on mac

bash

index.html

大体逻辑是

主要的文件

看文件

再来理一理依赖关系

打包成应用程序

打包前端

修改后端的tauri.conf.json,然后整个打包

打包在src-tauri/target/release/下,可以看到体积相对有点小

修改后端的`tauri.conf.json`,然后整个打包