0
点赞
收藏
分享

微信扫一扫

<Rust><Tauri>RustGUI框架Tauri2.0体验,窗口页面的生成(本地js和Vite框架)

mm_tang 2024-11-06 阅读 15

前言
本专栏是关于tauri这个rustGUI库的一些实例合集,会讲解一些前端(javascript)和后端(rust)的功能实现的实例代码,但是请注意,本专栏专注实例实现,不关心非常具体的实现逻辑,即没有源代码的详细讲解。

环境配置
系统:windows
平台:visual studio code
语言:javascript、rust
库:tauri
版本:2.0

概述
本文是专栏的第二篇,主要是介绍下在新版Tauri2.0下如何创建rustGUI窗口,实现简单的前后端互联。
1、本地前端UI
2、基于vite框架的前端UI

系列博客链接
1、<Rust><GUI>rust语言GUI库tauri体验:前、后端结合创建一个窗口并修改其样式

需要注意的是,本文是建立在新的2.0版本上,下面是tauri2.0的改变:
tauri2.0 changelog截取:

如果想要了解更详细的,可以参看官网:
https://tauri.app/zh-cn/blog/tauri-20/

下面我们将基于官网的指导示例,来创建一个简单tauri项目,以及运行生成窗口。

前排提示:
本文所基于的,是在windows系统上使用,工具是vscode,语言是rust,前端包括html、javascript,所以,你需要的前提条件,包括安装rust和vscode等。

接下来,我们将一步步介绍如何创建、运行一个tauri2.0的桌面项目。

本地前端UI

step1:打开vscode,并创建新的项目文件夹

mkdir tauri2-test
cd tauri2-test

然后先在这个文件夹内,创建一个ui文件夹,用于添加html前端代码:

tauri2-test>mkdir ui

然后,在创建的ui文件夹内,新建一个html文件,里面填充一些基本的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文档</title>
  </head>
  <body>
    <h1>这是来自 Tauri 的欢迎!</h1>
  </body>
</html>

以上步骤完成,先放置,以作备用。

step2:初始化一个tauri项目
我们先回到刚刚创建的项目文件夹tauri2-test下,输入以下指令:

tauri2-test>cargo tauri init

当然,输入这个指令有个前提,就是需要先安装Tauri CLI,指令如下:

cargo instal
举报

相关推荐

0 条评论