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

小鱼儿 2023-10-14 19:44 15阅读 0赞

## tauri-react ##

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

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

使用到的技术栈：

tauri：必须要用到的

react：前端页面开发框架，也可以用 Vue

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

mobx：数据存储和共享

antd：UI 页面渲染

sass：样式编程

node：v16.18.0 本地开发依赖

## 页面预览：登陆页和主页 ##

![format_png][]

![format_png 1][]

## 目录结构介绍 ##

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

![b7868eec38b0451794d16b0ddc5f470a.png][]

views：不同的路由展示的页面组件存放的地方![34715c48b41b4750b7bd89dffadae7ac.png][]

## 本地开发配置 ##

克隆到本地：

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

安装依赖：

pnpm install

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

pnpm develop

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

pnpm bundle

[GitHub - Sjj1024_tauri-react_ _tauri_react_nice]: https://github.com/Sjj1024/tauri-react
[format_png]: https://img-blog.csdnimg.cn/img_convert/fcd71ffea4cea560acccc5fc22ffc5c9.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/966d3a287b2ee7492915ecfa5d62c4da.webp?x-oss-process=image/format,png
[b7868eec38b0451794d16b0ddc5f470a.png]: https://img-blog.csdnimg.cn/b7868eec38b0451794d16b0ddc5f470a.png
[34715c48b41b4750b7bd89dffadae7ac.png]: https://img-blog.csdnimg.cn/34715c48b41b4750b7bd89dffadae7ac.png