rust GUI框架Tauri入门——基于vanilla.js

Tauri介绍

Tauri是一款用Rust构建的开源框架，用于创建轻量级、安全且高效的桌面应用程序。它将Rust的强大功能与Web技术（如HTML、CSS和JavaScript）相结合，提供了一种现代的、跨平台的方式来开发桌面应用。Tauri的核心理念是“最小权限原则”，只在必要时调用操作系统API，以降低攻击面。

Vite

Vite 是一个前端构建包，它在开发过程中提供了各种“生活质量”功能，例如 热模块重载 (HMR)。 在构建生产环境时，它也会将你的源代码转换成最优化的 HTML、CSS 和 JavaScript。 我们推荐使用快速、易配置、拥有 丰富插件生态的Vite。

Vite comes with a scaffolding utility similar to create-tauri-app that can quickly set up a new project from many pre-defined templates. 您可以从许多前端框架中选择，如 React、Svelte 或 Vue。 在本指南中，我们将选择 vanilla-ts 模板来创建一个 没有 任何前端框架的简单项目。

开始

getting-started-vite

创建项目pnpm create vite

√ Project name: ... helloworld001
√ Select a framework: » Vanilla
√ Select a variant: » JavaScriptScaffolding project in D:\taui\helloworld001...

接下来

cd helloworld001

简单说明一下

1. 项目名称
   这将是您的 JavaScript 项目的名称，这里是helloworld001。 对应此工具将创建的文件夹的名称，但在其他方面对你的应用没有影响。 您可以在此处填写任何您想要的名称。
2. 选择一个框架
   如果您计划之后使用一个前端框架，这里选择Vanilla.js
3. 选择一个语言
   这里选择 原生JavaScript。

当通过 vite 命令启动前端时，Vite 将在项目根目录中寻找名为 vite.config.ts 的配置文件。 我们想要自定义此文件以获得与 Tauri的最佳兼容性。

如果它不是由上面的脚手架创建的(例如如果你正在使用原版的 JavaScript)，你可能需要创建 vite.config.ts 文件。

手动创建helloworld001\vite.config.ts文件

import { defineConfig } from 'vite'export default defineConfig({// prevent vite from obscuring rust errorsclearScreen: false,// Tauri expects a fixed port, fail if that port is not availableserver: {strictPort: true,},// to access the Tauri environment variables set by the CLI with information about the current targetenvPrefix: ['VITE_', 'TAURI_PLATFORM', 'TAURI_ARCH', 'TAURI_FAMILY', 'TAURI_PLATFORM_VERSION', 'TAURI_PLATFORM_TYPE', 'TAURI_DEBUG'],build: {// Tauri uses Chromium on Windows and WebKit on macOS and Linuxtarget: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',// don't minify for debug buildsminify: !process.env.TAURI_DEBUG ? 'esbuild' : false,// 为调试构建生成源代码映射 (sourcemap)sourcemap: !!process.env.TAURI_DEBUG,},
})

创建 Rust 项目

每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri Rust 包构成。 此项目使用官方的软件包管理器及 Rust 通用构建工具 Cargo 来管理。

我们的 Tauri CLI 工具会在底层自动调用 Cargo，所以您大部分情况下无需和其交互。 Cargo 有诸多我们的 CLI 工具所未提供的有用功能，包括测试、分析及格式化工具。请参阅其官方文档来了解更多。

安装 TAURI CLI

pnpm add --save-dev @tauri-apps/cli

将 Tauri 的 CLI 工具作为开发依赖添加到你的项目中，使得你可以在项目中方便地使用 Tauri 提供的命令来构建和管理你的桌面应用程序。
要搭建一个使用 Tauri 的简单 Rust 项目，请打开终端并运行如下命令：

$ pnpm tauri init
✔ What is your app name? · helloworld001
✔ What should the window title be? · helloworld001
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · pnpm run dev
✔ What is your frontend build command? · pnpm run build

填入如下

helloworld001
helloworld001
../dist
http://localhost:5173
pnpm run dev
pnpm run build

接下来

pnpm install
pnpm tauri dev

原来在浏览器显示的，可以通过窗口显示出来。

pnpm tauri dev输出如下

     Running BeforeDevCommand (`pnpm run dev`)> helloworld001@0.0.0 dev D:\taui\helloworld001
> viteVITE v5.4.4  ready in 412 ms➜  Local:   http://localhost:5173/➜  Network: use --host to exposeInfo Watching D:\taui\helloworld001\src-tauri for changes...Compiling cfg-if v1.0.0Compiling byteorder v1.5.0Compiling siphasher v0.3.11Compiling memchr v2.7.4Compiling windows_x86_64_msvc v0.52.6Compiling itoa v1.0.11Compiling serde v1.0.210Compiling ryu v1.0.18Compiling getrandom v0.2.15Compiling windows-targets v0.52.6Compiling getrandom v0.1.16Compiling smallvec v1.13.2Compiling rand_core v0.6.4Compiling phf_shared v0.10.0Compiling zerocopy v0.7.35Compiling rand_core v0.5.1Compiling hashbrown v0.14.5Compiling equivalent v1.0.1Compiling rand_pcg v0.2.1Compiling phf_shared v0.8.0Compiling fnv v1.0.7Compiling scopeguard v1.2.0Compiling once_cell v1.19.0Compiling log v0.4.22Compiling lock_api v0.4.12Compiling thiserror v1.0.63Compiling parking_lot_core v0.9.10Compiling windows-sys v0.59.0Compiling new_debug_unreachable v1.0.6Compiling bitflags v1.3.2Compiling ppv-lite86 v0.2.20Compiling tinyvec_macros v0.1.1Compiling indexmap v2.5.0Compiling parking_lot v0.12.3Compiling precomputed-hash v0.1.1Compiling mac v0.1.1Compiling futf v0.1.5Compiling darling_core v0.20.10Compiling tinyvec v1.8.0Compiling rand_chacha v0.3.1Compiling rand_chacha v0.2.2Compiling rand v0.8.5Compiling rand v0.7.3Compiling dtoa v1.0.9Compiling utf-8 v0.7.6Compiling unicode-normalization v0.1.23Compiling dtoa-short v0.3.5Compiling tendril v0.4.3Compiling winapi-util v0.1.9Compiling phf v0.10.1Compiling phf_generator v0.8.0Compiling phf_generator v0.10.0Compiling phf_codegen v0.8.0Compiling phf_shared v0.11.2Compiling string_cache_codegen v0.5.2Compiling phf_codegen v0.10.0Compiling phf_macros v0.8.0Compiling selectors v0.22.0Compiling alloc-no-stdlib v2.0.4Compiling itoa v0.4.8Compiling stable_deref_trait v1.2.0Compiling percent-encoding v2.3.1Compiling nodrop v0.1.14Compiling serde_json v1.0.128Compiling string_cache v0.8.7Compiling unicode-bidi v0.3.15Compiling markup5ever v0.11.0Compiling matches v0.1.10Compiling servo_arc v0.1.1Compiling form_urlencoded v1.2.1Compiling idna v0.5.0Compiling alloc-stdlib v0.2.2Compiling phf_generator v0.11.2Compiling phf v0.8.0Compiling same-file v1.0.6Compiling cssparser v0.27.2Compiling fxhash v0.2.1Compiling uuid v1.10.0Compiling hashbrown v0.12.3Compiling thin-slice v0.1.1Compiling cfb v0.7.3Compiling url v2.5.2Compiling indexmap v1.9.3Compiling walkdir v2.5.0Compiling darling_macro v0.20.10Compiling phf_macros v0.11.2Compiling brotli-decompressor v4.0.1Compiling darling v0.20.10Compiling html5ever v0.26.0Compiling serde_with_macros v3.9.0Compiling libc v0.2.158Compiling dunce v1.0.5Compiling infer v0.13.0Compiling toml_datetime v0.6.8Compiling serde_spanned v0.6.7Compiling phf v0.11.2Compiling brotli v6.0.0Compiling aho-corasick v1.1.3Compiling windows-version v0.1.1Compiling glob v0.3.1Compiling windows_x86_64_msvc v0.39.0Compiling kuchikiki v0.8.2Compiling crossbeam-utils v0.8.20Compiling jsonptr v0.4.7Compiling vswhom-sys v0.1.2Compiling serde_with v3.9.0Compiling regex-automata v0.4.7Compiling json-patch v2.0.0Compiling windows v0.39.0Compiling adler2 v2.0.0Compiling toml_edit v0.22.20Compiling miniz_oxide v0.8.0Compiling toml_edit v0.19.15Compiling winapi v0.3.9Compiling crc32fast v1.4.2Compiling tauri-utils v1.6.1Compiling regex v1.10.6Compiling bytes v1.7.1Compiling toml v0.8.19Compiling toml v0.7.8Compiling flate2 v1.0.33Compiling dirs-sys-next v0.1.2Compiling vswhom v0.1.0Compiling winreg v0.52.0Compiling num-traits v0.2.19Compiling webview2-com-sys v0.19.0Compiling color_quant v1.1.0Compiling bytemuck v1.18.0Compiling raw-window-handle v0.5.2Compiling image v0.24.9Compiling embed-resource v2.4.3Compiling png v0.17.13Compiling dirs-next v2.0.0Compiling http v0.2.12Compiling semver v1.0.23Compiling anyhow v1.0.88Compiling crossbeam-channel v0.5.13Compiling instant v0.1.13Compiling regex-syntax v0.8.4Compiling lazy_static v1.5.0Compiling unicode-segmentation v1.11.0Compiling sha2 v0.10.8Compiling ico v0.3.0Compiling tauri-winres v0.1.1Compiling cargo_toml v0.15.3Compiling crossbeam-epoch v0.9.18Compiling bstr v1.10.0Compiling http-range v0.1.5Compiling pin-project-lite v0.2.14Compiling tauri-codegen v1.4.5Compiling globset v0.4.15Compiling tauri-build v1.5.4Compiling crossbeam-deque v0.8.5Compiling slab v0.4.9Compiling tauri v1.7.2Compiling filetime v0.2.25Compiling pin-utils v0.1.0Compiling futures-core v0.3.30Compiling fastrand v2.1.1Compiling futures-task v0.3.30Compiling futures-util v0.3.30Compiling tempfile v3.12.0Compiling serialize-to-javascript v0.1.2Compiling tar v0.4.41Compiling ignore v0.4.23Compiling tokio v1.40.0Compiling tauri-macros v1.4.6Compiling encoding_rs v0.8.34Compiling state v0.5.3Compiling app v0.1.0 (D:\taui\helloworld001\src-tauri)Compiling tao v0.16.10Compiling webview2-com v0.19.1Compiling tauri-runtime v0.14.5Compiling wry v0.24.11Compiling tauri-runtime-wry v0.14.10Finished `dev` profile [unoptimized + debuginfo] target(s) in 2m 10s

调用指令

Tauri 为您的前端开发提供了其他系统原生功能。 我们将其称作指令，这使得您可以从 JavaScript 前端调用由 Rust 编写的函数。 由此，您可以使用性能飞快的 Rust 代码处理繁重的任务或系统调用。

以下是一个简单示例：

#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}!", name)
}

一个指令等于一个普通的 Rust 函数，只是还加上了 #[tauri::command] 宏来让其与您的 JavaScript 环境交互。

指令 =  普通的Rust 函数

修改helloworld001\src-tauri\src\main.rs文件为以下内容

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]fn main() {//tauri::Builder::default()//    .run(tauri::generate_context!())//    .expect("error while running tauri application");tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");
}#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}!", name)
}

最后，我们需要让 Tauri 知悉您刚创建的指令才能让其调用。
我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令：

使用 @tauri-apps/api JavaScript 库来调用新创建的命令， 通过 JavaScript 访问诸如窗口、文件系统等核心功能， 您可以使用自己喜欢的 JavaScript 包管理器来安装。

pnpm add @tauri-apps/api

JavaScript 库安装之后，您就可以在 main.js 中调用指令了：

main.js文件

// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri// now we can call our Command!
// You will see "Welcome from Tauri" replaced
// by "Hello, World!"!
invoke('greet', { name: 'World' })// `invoke` returns a Promise.then((response) => {console.log(response)})

window.TAURI_INVOKE.invoke is undefined 问题

tauri.conf.json添加withGlobalTauri，值为true

{"$schema": "../node_modules/@tauri-apps/cli/schema.json","build": {"beforeBuildCommand": "pnpm run build","beforeDevCommand": "pnpm run dev","devPath": "http://localhost:5173","distDir": "../dist","withGlobalTauri": true}

参考资料

JavaScript 模块

JavaScript 使用类
JavaScript 模块

Vue

vue-quick-start

Vue Route

Vue Router
Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

vite

vite
在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Nuxt

Nuxt是一个免费且开源的框架，它提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级别的全栈Web应用和网站，使用的是Vue.js。
我们做了一切，让你从一开始就可以编写.vue文件，同时在开发中享受到热模块替换的便利，并在生产中获得高性能的应用，其中默认启用了服务器端渲染。