首页 > 其他分享 >创建 Tauri 项目

创建 Tauri 项目

时间:2024-09-18 09:53:47浏览次数:5  
标签:tauri Web 创建 项目 应用程序 Tauri


在上一篇中,我们详细介绍了如何在 Windows 上搭建 Tauri 开发环境,包括安装所需的依赖项、配置开发工具以及处理常见的问题。
这为我们顺利开始 Tauri 开发提供了坚实的基础。

在本章中,我们将更进一步,学习如何创建一个全新的 Tauri 项目,并探讨如何将 Tauri 集成到一个已经存在的 Web 项目中。
Tauri 的灵活性使得它可以轻松地与现有的前端框架协作,无论是 Vue、React 还是其他 JavaScript 框架,帮助开发者将 Web 应用打包成轻量级的桌面应用程序。

1. 创建一个全新的 Tauri 项目

我们将首先学习如何从头开始创建一个全新的 Tauri 项目。
这是一个非常简单的过程,Tauri 提供了丰富的 CLI 工具来帮助开发者快速启动并运行应用程序。
你只需要几条命令,就可以生成一个包含前端和后端结构的完整 Tauri 项目。

创建项目的步骤

  1. 创建新项目
    使用 Tauri 提供的创建工具,运行以下命令启动一个新的项目:
pnpm create tauri-app --rc

你将会被要求选择前端框架(如 Vue、React 或纯 HTML/JavaScript),然后工具会为你自动生成一个基础项目。

创建 Tauri 项目_应用程序

  1. 运行项目
    进入项目目录后,运行以下命令以启动开发环境:
pnpm tauri dev

这样就会启动 Tauri 开发环境,Tauri 会自动生成一个桌面应用程序,并在 Windows 系统上运行。

创建 Tauri 项目_Web_02

2. 将 Tauri 添加到现有的 Web 项目

如果你已经有了一个 Web 项目,并且想要将其打包成一个桌面应用程序,那么将 Tauri 集成到现有项目中是一个不错的选择。Tauri 可以非常容易地集成到现有的项目中,而不需要进行大量的修改。

集成 Tauri 的步骤

  1. 进入现有项目目录
    首先,进入你的 Web 项目根目录,确保项目已经初始化为一个 Node.js 项目,并且有 package.json 文件。
  2. 安装 Tauri
    使用 npm 安装 Tauri 相关的依赖包:
pnpm add -D @tauri-apps/cli@next
  1. 初始化 Tauri
    在项目中初始化 Tauri 环境,运行以下命令:
npx tauri init

你将被提示进行一些配置选择,比如应用的名字、窗口的标题、web 应用程序的目录、web 项目开发环境的运行地址等等。具体如下图

创建 Tauri 项目_开发环境_03

Tauri 会在项目目录下生成一个 src-tauri 文件夹,其中包含所有的 Tauri 配置和 Rust 代码。

src-tauri 目录结构如下图

创建 Tauri 项目_开发环境_04

  1. 运行项目
    完成集成后,你可以通过以下命令启动项目,并在桌面应用中查看你的 Web 应用:
pnpm tauri dev

运行成功效果图:

![5.png]

创建 Tauri 项目_应用程序_05


通过这种方式,你可以将已有的 Web 应用打包为桌面应用,使用 Tauri 的 API 访问本地操作系统功能,从而实现更多的应用场景。

结论

通过学习这两种创建 Tauri 应用的方式,你已经能够在 Windows 上快速构建和运行桌面应用程序。
无论是全新创建的项目,还是将 Tauri 添加到现有 Web 项目中,这都为你的开发工作提供了巨大的便利。
在接下来的章节中,我们将进一步探索 Tauri 的 API,学习如何与操作系统交互,如何使用 Tauri 提供的后端 Rust 代码增强应用功能。

参考

作者:_zhiqiu



标签:tauri,Web,创建,项目,应用程序,Tauri
From: https://blog.51cto.com/jikun/12043645

相关文章

  • windows 上 Tauri 开发环境配置
    Tauri是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成HTML、JavaScript和CSS的前端框架,同时可以在必要时使用Rust、Swift和Kotlin等语言编写后端逻辑。Tauri使用MicrosoftC++构建工具进行开发以......
  • 自然语言处理实战项目
    自然语言处理(NLP)实战项目是一个结合了理论知识与实践操作的综合性学习过程,旨在通过实际项目来加深学习者对NLP技术的理解和应用能力。以下是一个详细的NLP实战项目指南,涵盖项目选择、技术准备、实施步骤以及未来发展方向。一、项目选择在NLP领域,实战项目种类繁多,从基础的......
  • 结对项目
    这个作业属于哪个课程软件工程这个作业要求在哪里结对项目这个作业的目标与同学一起完成结对项目(四则运算自动生成程序)并进行测试项目成员本次结对项目由艾彬学号3122004730陆宇星学号3122004491共同完成正文github地址本次作业的代码已上传github......
  • 使用pnpm、monorepo 来构建 vue + 独立组件库项目
    新建项目使用pnpm进行安装pnpmcreatevue@latest在根目录下创建pnpm-workerspace.yaml文件packages:-'components/**'此处,components为根目录中的components文件夹,他是独立于我们项目的一个组件库,不包含在src内,此时目录结构如下:root-components-node_modules......
  • 结对对对项目
    结对对对项目这个作业属于哪个课程软件工程课程这个作业要求在哪里个人项目-作业-计科22级34班-班级博客-博客园(cnblogs.com)这个作业的目标按照要求写一个四则运算生成器成员一3122004883许億驰任务列表[x]1.实现命令行程序:创建一个命令行......
  • Vue.js入门系列(三十一):Element-UI的基本使用与按需引入、Vue 3简介及使用 Vue CLI 与 V
    个人名片......
  • 开源项目dotnet/eshop 和 dotnet/eshopsupport
    dotnet/eshop[1]和dotnet/eshopsupport[2]是两个与.NET相关的开源项目,分别用于展示电子商务应用的不同方面。dotnet/eshop:功能与架构:dotnet/eshop是一个基于.NETAspire的参考电商应用,展示了服务架构在构建现代在线购物平台中的应用。项目涵盖产品目录、购物车和订单管理......
  • 【JDK8新特性】Stream API 结合Lambda语法在项目中的实战应用
    Lambda语法回顾在JDK8中,Lambda表达式支持的引用类型主要有以下几种,如表1所示。种类Lambda表达式示例对应的引用示例类名引用普通方法(x,y,...)->对象名x.类普通方法名(y,...)类名::类普通方法名类名引用静态方法(x,y,...)->类名.类静态方法名(x,y,...)......
  • 实景三维助力工程建设项目智慧选址
    随着科技的不断进步,实景三维技术已经成为城市规划和工程建设中不可或缺的一部分。它通过高精度的地理信息数据,为工程建设项目提供了智慧选址的新思路。1.实景三维技术简介实景三维技术,是一种利用遥感、地理信息系统(GIS)、三维建模等技术手段,将现实世界的地理信息......
  • 项目测试用例:
    项目概述该项目是一款网上点餐系统,满足普通商家和普通用户的基本需求,主要有两大功能模块,分别是管理员模块(商家端)和用户模块(客户端)。系统供管理员登录和普通用户,登录进去会有对应相关管理操作:商家端主要实现了对员工和菜品的增删改査以及订单相关数据的查看与分析,客户端基于......