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

创建 Tauri 项目

时间:2024-09-13 15:15:31浏览次数:1  
标签: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),然后工具会为你自动生成一个基础项目。

    1.png

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

    pnpm tauri dev
    

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

    2.png

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

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

集成 Tauri 的步骤

  1. 进入现有项目目录
    首先,进入你的 Web 项目根目录,确保项目已经初始化为一个 Node.js 项目,并且有 package.json 文件。

  2. 安装 Tauri
    使用 npm 安装 Tauri 相关的依赖包:

    pnpm add -D @tauri-apps/cli@next
    
  3. 初始化 Tauri
    在项目中初始化 Tauri 环境,运行以下命令:

    npx tauri init
    

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

    3.png

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

    src-tauri 目录结构如下图

    4.png

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

    pnpm tauri dev
    

    运行成功效果图:
    ![5.png]
    通过这种方式,你可以将已有的 Web 应用打包为桌面应用,使用 Tauri 的 API 访问本地操作系统功能,从而实现更多的应用场景。

结论

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

参考

标签:tauri,Web,创建,项目,应用程序,Tauri
From: https://www.cnblogs.com/guojikun/p/18412220

相关文章

  • springboot大学生创新基金项目信息管理系统-计算机毕业设计源码90501
    摘 要本研究旨在利用SpringBoot框架设计并实现大学生创新基金项目信息管理系统,涵盖项目信息管理、申请信息管理、申请撤销管理、资金申请管理和资金撤销管理等功能模块。通过对大学生创新项目管理需求的深入分析,系统旨在提高管理效率和透明度。利用SpringBoot框架的快速......
  • 如何将本地项目上传到GitHub(SSH连接)
    在个人GitHub中新建项目(远程仓库),添加一个README文件,方便后面验证记住这个默认分支,我这里是main,你的可能是master或其他先复制下SSH地址在项目文件夹中右键打开Git命令行初始化本地仓库,同时指定默认分支为main,与远程仓库的main保持一致gitinit-bmain关联本地Git......
  • java+vue计算机毕设大学生互联网项目管理信息系统【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,大学生参与科研项目与创新创业活动的热情日益高涨。然而,传统的项目管理方式往往依赖于纸质文档和人工协调,不仅效率低下,还容......
  • 14款用于创建和销售数字产品的工具(专家推荐)
    创建和销售数字产品是获得被动收入并向全球观众分享您的专业知识的绝佳方式。但您需要合适的工具来实现这一目标。否则,您可能会在复杂的系统上浪费时间和金钱,最终无法获得预期的效果。在WPBeginner,我们已经创建数字产品超过十年,并成功使用EasyDigitalDownloads销售我们的插......
  • docker配置springcloud项目到服务器
    1.服务器安装部署docker镜像2.创建镜像目录,如图所示 以其中一个服务为例,每个文件夹对应一个服务单元,每个文件夹中包含 sh,Dockerfile文件3.编辑项目中的application-test(根据环境来定),如图:   4.配置Nacos,单独配置命名空间,增加配置文件,注意,组一定要是test,配错了系......
  • Java+Vue开发的固定资产管理系统(项目源代码)
     前言:资产设备管理系统旨在实现对企业资产和设备的全面管理,通过信息化手段提升管理效率,确保资产和设备的有效利用和安全性。以下是该系统的主要功能模块及其详细描述:一、个人中心用户登录与权限管理:实现用户身份验证和权限分配,确保系统数据的安全性。个人信息管理:允许用户......
  • SpringBoot 整合 Activiti 实现工作流(项目源代码)
     前言activiti工作流引擎项目,企业erp、oa、hr、crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求。一、项目形式springboot+vue+activiti集成了activiti在线编辑器,流行的前后端分离部署开发模式,快速开发平台,可插拔工作流服务。......
  • 如何创建自己的文心智能体
    在科技飞速发展的今天,人工智能已经融入到我们生活的方方面面,为我们的生活带来了前所未有的便利。在之前几年,在自然语言处理领域,CHATGPT一直是行业翘楚,引导自然语言方面的AI发展。然而4月16日百度AI大会的举办,李彦宏带着百度打磨多年的新的百度AI产品-文心智能体出现在大会开幕式上,......
  • Go runtime 调度器精讲(三):main goroutine 创建
    原创文章,欢迎转载,转载请注明出处,谢谢。0.前言回顾下上一讲的内容。主线程m0蓄势待发,准备干活。g0为m0提供了执行环境,P和m0绑定,为m0提供活,也就是goroutine。那么问题来了,活呢?哪里有活给m0干?这一讲我们将介绍m0执行的第一个活,也就是maingoroutine。maingou......
  • 解决Android Studio项目加载过慢问题
    解决方案替换掉谷歌原地址:(1)官网地址:https://services.gradle.org/distributions/(2)腾讯镜像Gradle下载地址:https://mirrors.cloud.tencent.com/gradle/(3)阿里云镜像Gradle下载地址:https://mirrors.aliyun.com/macports/distfiles/gradle/把官方下载地址替换成腾讯或者阿里云的......