Tauri 开发实践— Tauri 工程搭建

简介: 本文首发于微信公众号“前端徐徐”,介绍了在 macOS 环境下使用 Rust 和 Tauri 构建跨平台桌面应用的过程。首先需安装 Rust 及系统依赖,参考链接:[Rust 入门](https://www.rust-lang.org/zh-CN/learn/get-started) 和 [Tauri 前置条件](https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites)。

本文首发微信公众号:前端徐徐。

⚠️注意:此工程搭建,演示环境为macOS。

终端环境要求

在开始开发tarui的项目之前,你需要安装Rust和系统依赖项。

具体可参考:

https://www.rust-lang.org/zh-CN/learn/get-started

https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites

命令行初始化项目

pnpm create tauri-app

按照命令行提示依次输入项目名称,包名,前端语言,包管理工具,前端UI框架库以及编程语言

现在如果你的vscode安装了rust-analyzerTauri这两个插件,在打开此项目的时候,会自动下载rust相关的依赖。按照提示可以进入项目根目录安装前端相关依赖并启动项目。首次启动会下载编译一些文件,可能会比较慢,建议使用科学上网。

如果一切顺利,你会出现这个界面,我这里选择的是Vite + React 的模式所以会出现这个界面,你如果选择其他的将会出现对应的界面。

项目结构

[tauri-app] # 项目名称
├─ [node_modules] # 前端依赖
├─ [src] # 前端程序源
├─ [src-tauri] # Tauri 程序源
│    ├─ [icons] # 应用程序图标
│    ├─ [src] # Tauri App 程序源,例如系统菜单,托盘,插件配置等
│    ├─ [target] # 构建的产物会被放入此文件夹中,target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs # Tauri 构建应用
│    ├─ Cargo.lock # 包含了依赖的精确描述信息
│    ├─ Cargo.toml # Tauri (Rust) 项目清单
│    └─ tauri.conf.json # 自定义 Tauri 应用程序的配置文件,例如应用程序窗口尺寸,应用名称,权限等
├─ index.html # 项目主界面
├─ package.json # 前端package.json配置
├─ tsconfig.json # typescript 配置文件
├─ vite.config.ts # vite 配置文件
└─ ... # 其他

打包构建

这里我们只是最简单的打包构建,并没有涉及到签名等操作,只是为了根据直观的学习整个流程,后面的教程会有专门的章节来讲打包构建。

直接运行构建命令

pnpm tauri build

会出现如下错误,需要修改一下src-tauri/tauri.conf.json中的"identifier"为"com.xtool",可根据自身的项目来确定identifier。第一次构建也会比较费时间,依然建议使用科学上网。

打包构建完成之后,安装包会出现在如下目录,到此就可以安装和使用了。

相关文章
|
1天前
|
存储 Rust 前端开发
Tauri 开发实践 — Tauri 配置介绍
本文首发于微信公众号“前端徐徐”,主要讲解`package.json`、`Cargo.toml`及`tauri.conf.json`三个文件的配置。其中,`tauri.conf.json`最为复杂,涉及众多配置项。`package.json`用于配置前端依赖与脚本;`Cargo.toml`用于声明Rust应用依赖;`tauri.conf.json`则管理前端资源、API白名单等。这些配置对于Tauri应用的开发至关重要。
15 5
|
1天前
|
Rust 前端开发 JavaScript
Tauri 开发实践— Tauri 怎么样
Tauri 是一个用于构建高效、小型二进制文件的框架,适用于所有主流桌面及移动平台。开发人员可以利用任何可编译为 HTML、JavaScript 和 CSS 的前端框架构建应用,并借助 Rust、Swift 或 Kotlin 进行后端开发。Tauri 采用三层架构,包括 tauri-app、WRY(跨平台 Webview 库)和 TAO(跨平台窗口管理器)。相较于 Electron,Tauri 使用系统内置浏览器引擎执行 Web APP,具有更小的资源占用和更高性能。详情见:[Tauri 官网](https://tauri.app/)。
9 0
Tauri 开发实践— Tauri 怎么样
|
1月前
|
API 开发工具 Android开发
从安装到打包,手把手教你如何在Uno Platform上部署跨平台应用——一篇详尽的开发者指南
【9月更文挑战第7天】Uno Platform 是一个跨平台应用开发框架,利用UWP API构建Web、iOS、Android等多平台应用。本文详述了安装Uno Platform SDK、配置项目支持跨平台、添加主方法以及使用命令行工具进行应用打包的过程,助您快速上手 Uno Platform 并部署应用。通过简单的代码示例,让开发者轻松掌握从安装到发布的核心步骤。
99 2
|
2月前
|
Rust 资源调度 内存技术
Tauri——如何创建一个tauri项目
Tauri——如何创建一个tauri项目
41 4
|
5月前
|
缓存 Rust 前端开发
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建
514 0
|
4月前
|
开发框架 Rust Dart
Flutter、Electron 和 Tauri 框架简介
Flutter、Electron 和 Tauri 框架简介
133 0
|
5月前
|
Web App开发 Rust 前端开发
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri App开启远程调试功能
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri App开启远程调试功能
508 0
|
5月前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
75 0
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
5月前
|
Dart Java Android开发
Flutter插件开发:开发与使用的技术解析
【4月更文挑战第26天】本文详细介绍了Flutter插件开发,包括创建插件项目、编写原生代码(Android和iOS)、注册与使用插件。通过Flutter命令行工具生成插件,使用MethodChannel进行Dart与原生平台的通信。示例展示了如何获取设备信息并展示在Flutter应用中。文章还提到插件测试与发布,强调了兼容性与性能的重要性,指出Flutter插件是扩展应用功能的关键。
|
11月前
|
Web App开发 前端开发 JavaScript
用electron打包前端应用初体验
用electron打包开发桌面应用遇到的各种问题和解决办法
174 1