Day 15:01. 基于 Tauri 2.0 开发后台管理系统-Tauri 2.0 初探

一、前言

Nuxt 开发的博客要暂时告一段落了,原本我是打算基于 NuxtContent 完成一套静态的博客模块,但是发现和我之后要做的有很多相违背的,比如我希望数据是通过后台管理系统来的维护的,主要有利于我动态发布,以及后续一些收费模块的整合,所以不想再花大量时间去折腾 NuxtContent 了。

我之前做过很多后台管理系统,无论是工作中,还是自己搭建的脚手架工程,无一例外都是传统的 web 应用,基于浏览器访问,使用 VUE/React 等前端框架,除了具体业务模块上的区别外,都是换汤不换药,无非就是路由、权限、字典等通用模块的不同实现方式。我对此已经毫无兴趣,所以我打算换个模式玩一玩,做一个桌面端的后台管理系统。

首先声明,我为什么要做成桌面端?

  • 纯粹个人兴趣,我就是想探索一下。为后续做一些桌面端应用探探路(我其实想自己弄一个类似 Typora 的编辑工具😄)
  • web 后台项目我自己做的太多了,加上优秀的二开项目也很多,没有动力。
  • 作为后台管理系统,我并不打算部署在外网上,所以不需要顾忌桌面端无法随时访问的痛点。
  • 桌面端可以深度集成操作系统,可以做一些不一样的尝试。

当然如果你需要随时随地的浏览器访问,那可能比较遗憾了,我暂时没有这方面拓展的打算,可以看一下我之前的文章,或许对你有所帮助 juejin.cn/column/7239...

如果你和我一样,喜欢尝试新鲜事物,那么接下来就要开始我们的征程啦!!!😊

二、为什么选择 Tauri ?

当我脑子里有"用桌面端做后台管理系统"这个想法的时候,我第一想到的其实是 Electron ,因为我之前就折腾过一段时间的 Electron ,给我的感觉就是生态完善,没有后顾之忧。

但是,我这个人比较喜欢折腾,我又去搜了一下,发现 Tauri 好像势头不错,我内心又想摆脱浏览器那一套东西(这里纯粹是自己主观意志作祟),与我一拍即合,就它了。

当然更 小的打包体积,内存占用低,更注重安全和性能 让我多了一丝好感。

三、初探 Tauri

这里是官方文档:tauri.app/zh-cn/start...

这里我就不去赘述什么是 Tauri ? 一些概念性的东西,大家可以你自己去官网上查看。

Tauri 2.0 的特点:创建小型、快速、安全、跨平台的应用程序

3.1. 前置要求

系统依赖项安装

跟着文档操作就完事了。

tauri.app/zh-cn/start...

下载安装环境需要点时间,趁这段时间,我们看一下 Rust 的学习文档。

rust-lang.org/zh-CN/learn...

doc.rust-lang.org/book/

下载完成后,验证一下 Rust 是否安装成功。

第一个 hello word !

新建一个文件 main.rs

运行 rustc main.rs 编译

这个时候生成了一个两个文件

rust 复制代码
rust-test    
├─ main.exe  # 可执行文件 
├─ main.pdb  # 程序数据文件
└─ main.rs  # 源文件

命令行输入 .\main

感觉和 JAVA 很相似,具体的语法我大致浏览了一遍,等用到的时候再细看吧。

四、创建项目

bash 复制代码
pnpm create tauri-app

vscode 打开项目

安装这两个插件

项目结构看这里:tauri.app/zh-cn/start...

五、启动项目

安装依赖 pnpm i

启动项目 pnpm tauri dev

❗️❗️❗️如果出现异常或者不是下面页面,重启一下电脑,因为之前装的环境有的需要重启后才可以生效

六、总结

今天就先到这里,贪多嚼不烂,哈哈哈哈!😄😄😄

千里之行,始于足下。你的"个人公司"从这第一个2小时开始。欢迎在评论区分享你的进展或遇到的卡点,我会逐一查看,尽可能的帮助解决。我们下一篇文章见!

相关推荐
晚霞的不甘5 分钟前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
We་ct9 分钟前
LeetCode 73. 矩阵置零:原地算法实现与优化解析
前端·算法·leetcode·矩阵·typescript
晚霞的不甘10 分钟前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互
程序员泠零澪回家种桔子11 分钟前
OpenManus开源自主规划智能体解析
人工智能·后端·算法
~小仙女~13 分钟前
组件的二次封装
前端·javascript·vue.js
这是个栗子18 分钟前
AI辅助编程(一) - ChatGPT
前端·vue.js·人工智能·chatgpt
2501_9444480018 分钟前
Flutter for OpenHarmony衣橱管家App实战:预算管理实现
前端·javascript·flutter
Remember_99322 分钟前
Spring 核心原理深度解析:Bean 作用域、生命周期与 Spring Boot 自动配置
java·前端·spring boot·后端·spring·面试
笨蛋不要掉眼泪25 分钟前
Redis持久化解析:RDB和AOF的对比
前端·javascript·redis
心.c27 分钟前
Vue3+Node.js实现文件上传分片上传和断点续传【详细教程】
前端·javascript·vue.js·算法·node.js·哈希算法