Tauri教程-基础篇-第一节 Tauri项目创建及结构说明

请添加图片描述

“如果结果不如你所愿,就在尘埃落定前奋力一搏。”——《夏目友人帐》
“有些事不是看到了希望才去坚持,而是因为坚持才会看到希望。”——《十宗罪》
“维持现状意味着空耗你的努力和生命。”——纪伯伦

Tauri 技术教程 * 第四章 Tauri的基础教程
第一节 项目创建及结构说明

推荐

Koi技术教程-Tauri-第二章 Tauri的业务架构
Koi技术教程-Tauri-第三章 Tauri的搭建环境

一. 概述

这一章节,我们来了解下如何创建一个Tauri的项目,熟悉下它的目录结构,以及如何运行和发布。

官方文档:https://tauri.app/start/create-project/

二. 创建项目

官方提供了一个“create-tauri-app ”工具来帮助我们创建一个基础版本的项目。

create-tauri-app 目前包含以下模板:无框架(纯HTML、CSS and JavaScript)、Vue.js、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos 和 Sycamore。您还可以在 Awesome Tauri 仓库中找到或添加您自己的社区模板和框架。

当然若想在自己的前端项目中使用Tauri也是可以的,您可以 将 Tauri 添加到现有的项目中 以便快速地将现有代码库转换为 Tauri 应用。

1. 使用 create-tauri-app

1. 创建项目

这里使用 pnpm来创建项目,其他方式可参见官方文档:

pnpm create tauri-app

2. 选择适合自身项目的模板

✔ Project name · tauri-app01
✔ Identifier · com.tauri-app01.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

3. 安装项目依赖

// cd 到项目目录下
cd tauri-app01
// 使用pnpm 安装项目依赖 为了保证安装速录可以设置仓库源  
// pnpm config set registry https://registry.npmmirror.com
pnpm i

2. 使用 Tauri CLI

此方式主要用于在现有的项目中添加tauri,(现有的项目是前端的项目,不要辖理解)

1. 安装cll依赖包

包管理器安装 Tauri 的 CLI 工具

pnpm add -D @tauri-apps/cli@latest

2. 确认服务器的 URL

确定您的前端开发服务器的 URL。这个 URL 是 Tauri 用来加载您的内容的地址。例如,如果您正在使用 Vite,那么默认的 URL 是 http://localhost:5173

这里需要考虑你项目的访问不要有前缀,当然你也可以修改它以满足要求

3. 初始化Tauri项目配置

在项目的根目录下:

pnpm tauri init

过程中你需要选择一些内容:

✔ What is your app name? tauri-app01
✔ What should the window title be? tauri-app01
✔ Where are your web assets located? ..
✔ 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

三. 运行及构建项目

当您完成创建项目的步骤后, 你就可以运行它,以感受下它的能力,在 “创建项目” 这一个环节中,如果你使用的是create-tauri-app的方式基本不会出现什么问题,但你如果是基于cll 的方式来创建项目就需要关注下项目的复杂度,可能在这一环节无法运行,我更建议使用基于create-tauri-app的方式创建我们需要的项目后,再将原项目逐步迁移过来。(这里http的方式要注意:axiso,alove是不适用的请求工具类,需要改造,或许你可以通过一些方式解决,但不推荐)

我们使用vscode进行项目的开发;在使用之前你需要为你的vscode安装rust的环境:

  • tauri
  • rust-analyzer

1. 运行项目:

pnpm tauri dev

注意:pnpm dev 启动的是前端项目,有些人可能会考虑我只想调试前端项目,而不需要后端,这里目前来看是行不通的,它不太像uniapp那样提供多运行环境的支持。

首次启动时,是比较慢的(可以适当冲杯茶,放松一下,前提是你要保证你的机器连接互联网),不要轻易修改tauri下的文件,会重新加载,慢

请添加图片描述

2. 构建项目

pnpm tauri build

首次编译的时间会比较长,需要在对应的环境下编译需要的应用程序,在window下编程后的文件放在:src-tauri\target\release\bundle 下

  • msi 安装文件
  • nsis 安装文件
  • src-tauri\target\release 下有一个exe的免安装程序

此时安装文件的步骤都是英文的,后续我们再探讨如何设定安装步骤及语言。

四. 项目目录结构

使用 create-tauri-app 创建的项目目录如下:

这里我们以 vite6,typescript 为例

  • vscode
  • node_modules
  • public
  • src
  • src-tauri
    • capabilities 能力(Capabilities)是tauri或插件所提供的,是一组权限
      • default.json 权限配置文件
    • gen
      • schemas 存放描述文件
    • icons 系统的图标,采用命令生成
    • src 服务端代码的存放位置
      • lib.rs 我们安装依赖的配置文件
      • main.rs 主入口
    • target 编译后的文件目录
    • build.rs build的入口文件
    • cargo.toml cargo的配置文件
    • tauri.conf.json tauri的配置文件
  • index.html
  • package.json
  • tsconfig.json
  • vite.config.ts

这里。vscode、node_modules、public、src、package.json 都是我们普遍了解的,如果你不清楚,你可以结束本次的学习,了解下如何构建前端项目,再回来继续学习。

src-tauri 是本项目的重点。在此目录中 capabilities、lib.rs、cargo.toml、tauri.conf.json、icons是我们重点关注的文件,后续章节中我们会反复应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyinstaller冻结打包多进程程序的bug:无限创建进程直至系统崩溃

前面写过两篇相关的文章: PyQt应用程序打包Python自动按键 这两篇文章都没有提到下面的这个重要问题: 采用Pyinstaller冻结打包多进程程序时,必须非常小心。这个技术线在Windows上会有一个非常严重的Bug。直接运行打包后的程序会造成无限创…

网络安全-kail linux 网络配置(基础篇)

一、网络配置 1.查看网络IP地址, 我的kail:192.168.15.128 使用ifconfig查看kail网络连接情况,ip地址情况 又复制了一台kail计算机的IP地址。 再看一下windows本机:使用ipconfig进行查看: 再看一下虚拟机上的win7I…

uni app 写的 小游戏,文字拼图?文字拼写?不知道叫啥

从下方的偏旁部首中选在1--3个组成上面文章中的文字&#xff0c;完成的文字标红 不喜勿喷 《满江红》 其中用到了两个文件 strdata.json parameters.json 这两个文件太大 放到资源中了 资源文件 <template><view class"wenzi_page_main"><view c…

分享几个高清无水印国外视频素材网站

在数字内容创作日益盛行的今天&#xff0c;高质量的视频素材成为了视频制作、广告创意和多媒体项目中不可或缺的元素。对于追求专业水准的创作者而言&#xff0c;高清、无水印的视频素材是确保作品质量的基石。以下将分享几个优质的视频素材网站&#xff0c;为您的创作之路提供…

【LLM】大语言模型基础知识及主要类别架构

文章目录 LLM大语言模型1.LLM基础知识1.1大模型介绍:1.2语言模型1.21n-gram语言模型1.22神经网络语言模型1.23基于Transformer的预训练语言模型1.24大语言模型 1.3模型评估指标1.31 BLEU1.32 Rouge指标1.33 困惑度PPL 2.LLM主要类别架构2.1 自编码模型2.2 自回归模型2.3 Encode…

剖析 Claim-Check 模式:以小传大,赋能分布式系统与微服务

1. 前言 1.1 写作背景与目的 在当今分布式系统与微服务架构盛行的时代&#xff0c;服务间的消息传递与数据交换越来越频繁。传统的消息传输在面对海量数据时&#xff0c;往往会遇到以下痛点&#xff1a; 消息体过大&#xff1a;直接通过消息队列或服务间接口发送大体量数据&…

【Uniapp-Vue3】v-if条件渲染及v-show的选择对比

如果我们想让元素根据响应式变量的值进行显示或隐藏可以使用v-if或v-show 一、v-show 另一种控制显示的方法就是使用v-show&#xff0c;使用方法和v-if一样&#xff0c;为true显示&#xff0c;为false则不显示。 二、v-if v-if除了可以像v-show一样单独使用外&#xff0c;还…

JVM实战—OOM的定位和解决

1.如何对系统的OOM异常进行监控和报警 (1)最佳的解决方案 最佳的OOM监控方案就是&#xff1a;建立一套监控平台&#xff0c;比如搭建Zabbix、Open-Falcon之类的监控平台。如果有监控平台&#xff0c;就可以接入系统异常的监控和报警&#xff0c;可以设置当系统出现OOM异常&…

Idea(中文版) 项目结构/基本设置/设计背景

目录 1. Idea 项目结构 1.1 新建项目 1.2 新建项目的模块 1.3 新建项目模块的包 1.4 新建项目模块包的类 2. 基本设置 2.1 设置主题 2.2 设置字体 2.3 设置注释 2.4 自动导包 2.5 忽略大小写 2.6 设置背景图片 3. 项目与模块操作 3.1 修改类名 3.2 关闭项目 1. I…

liunx 中编写 springboot 服务停止时定时检查重启脚本

当服务内存溢出或其他一些原因&#xff0c;导致程序停止运行&#xff0c;服务不可用&#xff0c;为了服务能够及时自动重启&#xff0c;记录一下操作过程&#xff01; 首先编写自动重启的脚本指令&#xff0c;脚本在服务器上编写的&#xff0c;最后不要写好txt文件&#xff0c;…

CV-LLM经典论文解读|VTimeLLM: Empower LLM to Grasp Video MomentsVTimeLLM:赋能大语言模型理解视频片段

论文标题 VTimeLLM: Empower LLM to Grasp Video Moments VTimeLLM&#xff1a;赋能大语言模型理解视频片段 论文链接&#xff1a; VTimeLLM: Empower LLM to Grasp Video Moments论文下载 论文作者 Bin Huang, Xin Wang, Hong Chen, Zihan Song, Wenwu Zhu (Tsinghua Un…

wujie无界微前端框架初使用

先说一下项目需求&#xff1a;将单独的四套系统的登录操作统一放在一个入口页面进行登录&#xff0c;所有系统都使用的是vue3&#xff0c;&#xff08;不要问我为啥会这样设计&#xff0c;产品说的客户要求&#xff09; 1.主系统下载wujie 我全套都是vue3&#xff0c;所以直接…

ceph文件系统

ceph文件系统&#xff1a;高度可扩展&#xff0c;分布式的存储文件系统&#xff0c;旨在提高性能&#xff0c;高可靠性和高可用的对 象存储&#xff0c;块存储&#xff0c;文件系统的存储。使用分布式的算法保证数据的高可用和一致性。 ceph的组件 1、MON&#xff1a;ceph m…

Django的runserver

当年执行 python manage runserver命令时 1. 先执行 runserver 中的 handle方法 2. 执行 self.run()方法 3. 执行 self.inner_run() 3.1 inner_run 下 run方法的封装 3.1.1 接着看 handle 怎么来的 封装了一个方法 接着找返回函数 3.1.2在 basehttp 下 3.1.3 get_wsgi_appl…

开源AI智能名片2+1链动模式S2B2C商城小程序在商业流量获取中的应用研究

摘要&#xff1a; 随着互联网技术的迅猛发展&#xff0c;商业流量的获取已成为企业市场竞争中的关键环节。传统意义上的“客流量”在互联网语境下被赋予了新的内涵&#xff0c;即“商业流量”&#xff0c;其本质依然指向用户。在当前线上线下融合的商业环境中&#xff0c;流量…

(leetcode算法题)76. 最小覆盖子串

以s "ADOBECODEBANC", t "ABC"为例&#xff0c;进行如下演示 对于上图的说明&#xff1a; 1. 上面八个状态是在从左往右滑动窗口时&#xff0c;每发现一个窗口满足以下条件就进行状态暂停 条件&#xff1a;s[l, r] 覆盖了 t 这个字符串 2. 只有出窗口之…

2025-01-07 Unity 使用 Tip3 —— 游戏保存数据到 Application.persistentDataPath 不生效解决方案更新

文章目录 1 问题描述2 老版解决方案&#xff08;测试可行&#xff09;2.1 创建 js 脚本2.2 添加 js 引用 3 新版解决方案&#xff08;测试不可行&#xff09;4 实际问题 ​ WebGL 平台限制了文件访问系统&#xff0c;在 Unity 以前版本中&#xff0c;开发者想要在 WebGL 上保存…

IDEA的常用设置

目录 一、显示顶部工具栏 二、设置编辑区字体按住鼠标滚轮变大变小&#xff08;看需要设置&#xff09; 三、设置自动导包和优化导入的包&#xff08;有的时候还是需要手动导包&#xff09; 四、设置导入同一个包下的类&#xff0c;超过指定个数的时候&#xff0c;合并为*&a…

Anthropic 的人工智能 Claude 表现优于 ChatGPT

在人工智能领域&#xff0c;竞争一直激烈&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;技术的发展中&#xff0c;多个公司都在争夺市场的主导地位。OpenAI的ChatGPT和Anthropic的Claude是目前最具影响力的两款对话型AI产品&#xff0c;它们都能够理解并生成自然…

锂电池剩余寿命预测 | 基于BiLSTM-Attention的锂电池剩余寿命预测,附锂电池最新文章汇集

锂电池剩余寿命预测 | 基于BiLSTM-Attention的锂电池剩余寿命预测&#xff0c;附锂电池最新文章汇集 目录 锂电池剩余寿命预测 | 基于BiLSTM-Attention的锂电池剩余寿命预测&#xff0c;附锂电池最新文章汇集预测效果基本描述程序设计参考资料 预测效果 基本描述 锂电池剩余寿…