tauri-react:快速开发跨平台软件的架子,支持自定义头部UI拖拽移动和窗口阴影效果

tauri-react

一个使用 tauri+react+ts+antd 开发跨平台软件的模板,支持窗口头部自定义和窗口阴影,不用再自己做适配了,拿来即用,非常 nice。而且已经封装好了 tauri 的 http 请求工具,省去很多弯路。

开原地址:GitHub - Sjj1024/tauri-react: 一个最基础的使用tauri和react开发跨平台应用软件的架子,支持自定义头部和窗口阴影,非常的nice好用

使用到的技术栈:  

tauri:必须要用到的  

react:前端页面开发框架,也可以用 Vue  

react-router:路由页面跳转控制  

mobx:数据存储和共享  

antd:UI 页面渲染  

sass:样式编程  

node:v16.18.0 本地开发依赖

页面预览:登陆页和主页

目录结构介绍

layout里面放到是布局内容,可以在这里面修改头部内容,就可以得到你想要的头部

views:不同的路由展示的页面组件存放的地方

本地开发配置

克隆到本地:

git clone https://github.com/Sjj1024/tauri-react.git

安装依赖:

pnpm install

开发预览:第一次比较耗时和消耗电脑性能,因为要安装 tauri 依赖

pnpm develop

编译打包:打包为不同平台的安装文件

pnpm bundle

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

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

相关文章

如何基于 ACK Serverless 快速部署 AI 推理服务

作者:元毅 随着 AI 浪潮的到来,各种 AI 应用层出不穷,众所周知 AI 应用对 GPU 资源强烈依赖,但 GPU 很昂贵,如何降低 GPU 资源使用成本成为用户首要问题。而 AI 与 Serverless 技术结合,完全可以达到按需使…

Electron入门,项目启动。

electron 简单介绍: 实现:HTML/CSS/JS桌面程序,搭建跨平台桌面应用。 electron 官方文档: [https://electronjs.org/docs] 本文是基于以下2篇文章且自行实践过的,可行性真实有效。 文章1: https://www.cnbl…

高效mac常用快捷键整理

高效mac常用快捷键整理 macOS全局、剪切、拷贝、粘贴finder 和 系统快捷键文稿 浏览器chrome标签页和窗口快捷键功能快捷键网页快捷键 Idea & Pycharm必记编辑查询&替换导航重构编译、运行、调试 iTerm标签分屏编辑 文本编辑 sublime text导航:打开&关闭…

springcloud3 hystrix实现服务监控显示3(了解)

一 hystrix的服务监控调用 1.1 hystrix的服务监控调用 hystrix提供了准实时的监控调用(hystrix dashbord),Hystrix 会持续的记录所有通过hystrix发送的请求的执行信息,并以统计报表和图形的形式展示给用户,包括每秒执…

安装和配置 Ansible

安装和配置 Ansible 按照下方所述,在控制节点 control.area12.example.com 上安装和配置 Ansible: 安装所需的软件包 创建名为 /home/curtis/ansible/inventory 的静态清单文件,以满足以下要求: node1 是 dev 主机组的成员 node2 …

【面试题】2、Docker和Spring相关

1、Docker是什么? (1)Docker是一个快速交互、运行应用的技术,可以将程序及其依赖、运行环境一起打包为一个镜像,该镜像可以迁移到任意的Linux操作系统 (2)运行时利用沙箱机制形成隔离容器&…

docker打包运行中的容器,生成镜像文件保存到本地

因为想着方便部署,将所有没问题的项目容器打包成镜像,走到哪儿都离线安装自动部署。 第一步先把运行中的容器打包成镜像 docker commit 运行中容器id 像打包成的镜像名称第二步将大象装进冰箱,不好意思说错了,把镜像保存到本地 …

vue3 + antv/x6 实现拖拽侧边栏节点到画布

前篇:vue3ts使用antv/x6 自定义节点 前篇:vue3antv x6自定义节点样式 1、创建侧边栏 用antd的menu来做侧边栏 npm i --save ant-design-vue4.x//入口文件main.js内 import Antd from ant-design-vue; import App from ./App; import ant-design-vue/…

Java SpringBoot Vue ERP系统

系统介绍 该ERP系统基于SpringBoot框架和SaaS模式,支持多租户,专注进销存财务生产功能。主要模块有零售管理、采购管理、销售管理、仓库管理、财务管理、报表查询、系统管理等。支持预付款、收入支出、仓库调拨、组装拆卸、订单等特色功能。拥有商品库存…

用户订阅付费如何拆解分析?看这篇就够了

会员制的订阅付费在影音娱乐行业中已相当普及,近几年,不少游戏厂商也开始尝试订阅收费模式。在分析具体的用户订阅偏好以及订阅付费模式带来的增长效果时,我们常常会有这些疑问: 如何从用户的整体付费行为中具体拆解订阅付费事件…

Unity用NPOI创建Exect表,保存数据,和修改删除数据。以及打包后的坑——无法打开新创建的Exect表

先说坑花了一下午才找到解决方法解决, 在Unity编辑模式下点击物体创建对应的表,获取物体名字与在InputText填写的注释数据。然后保存。创建Exect表可以打开,打包PC后,点击物体创建的表,打不开文件破损 解决方法&#…

Java进阶篇--迭代器模式

目录 同步迭代器(Synchronous Iterator): Iterator 接口 常用方法: 注意: 扩展小知识: 异步迭代器(Asynchronous Iterator): 常用的方法 注意: 总结&#xff1a…

记一次fegin调用的媒体类型问题

1.问题:分页查询,分页参数传递不生效 2.开发环境:fegin接口 开发环境:调用接口 3.修改后:fegin接口不变 调用接口 前端媒体类型: 问题解决!!! 4.原因分析&…

开源数据库Mysql_DBA运维实战 (备份与还原)

Mysql数据库的备份与还原🍃 备份对于数据库而言是至关重要的。当数据文件发生损坏、MySQL服务出现错误、系统内核崩溃、计算机硬件损坏或者数据被误删等事件时,使用一种有效的数据备份方案,就可以快速解决以上所有的问题。MySQL提供了多种备…

mongodb数据库

目录 一、数据库 二、文档 三、集合 四、元数据 五、MongoDB 数据类型 1、ObjectId 2、字符串 3、时间戳 4、日期 一、数据库 一个 mongodb 中可以建立多个数据库。 MongoDB 的默认数据库为"db",该数据库存储在 data 目录中。 MongoDB 的单…

跨境电商平台(例如阿里巴巴、虾皮)的商品数据如何收集?

跨境电商是指通过互联网,以跨越国家或地区边界的方式进行电子商务交易的商业行为。传统的电子商务通常是在同一国家或地区内进行,而跨境电商则侧重于跨国贸易。跨境电商通过在线平台(如阿里巴巴、亚马逊等)或第三方服务商&#xf…

Openlayers 实战 - 地图视野(View)- 图层 -(layer)- 资源(source)显示等级设置

Openlayers 实战 - 地图视野(View)- 图层 -(layer)- 资源(source)显示等级设置 问题原因核心代码完整代码:在线示例 在以往的项目维护中,出现一个问题,使用最新高清底图发…

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)

文章目录 filter 滤镜blur() 模糊度例子 渐变光晕 brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度 backdrop-filter 蒙版,滤镜例子 卷轴展开 filter 滤镜 动图为效果添加前后对…

前馈神经网络正则化例子

直接看代码: import torch import numpy as np import random from IPython import display from matplotlib import pyplot as plt import torchvision import torchvision.transforms as transforms mnist_train torchvision.datasets.MNIST(root…

产品经理必知必会0.2

Q1:产品经理需要具备的能力? A:硬实力:产品设计、需求分析、竞品分析、数据分析、撰写文档 软实力:沟通能力、学习能力、用户思维、主动性、好奇心、同理心、责任心、抗压能力、目标导向.... 扩展能力:商业思维、市场敏感度... Q…