vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统
基于 vue3.x + typescript + vite + naive ui + tailwindcss + jsx + vue-router + pinia,项目使用 tsx 作为模版输出,全程没有使用vue提供的SFC, 仿macos桌面前端项目,开源免费模版,希望减少工作量和学习新技术,希望能够帮助大家; 本人主要是后端的开发,对于前端我也是刚入门的小白,有很多的东西还没有学透,项目里面的用法和写法以及思想都是借鉴别人的,业余的时间都会去看看大佬们写的项目,这个项目也算是练练手吧,希望大家能够多多提提建议。请联系QQ:526412864
使用到的技术
- vue3.x
- typescript
- vite4.x
- naive-ui
- tailwindcss
- jsx
- vueuse
- vue-router
- pinia
- iconify
- postcss
一些常用的插件:
- 打包分析:rollup-plugin-visualizer
- 浏览器适配:postcss-px-to-viewport-8-plugin
- 按需自动导入:unplugin-auto-import、unplugin-vue-components
- svg图标:unplugin-icons、vite-plugin-svg-icons
- 图片自动引入:vite-plugin-vue-images
- 打包压缩:vite-plugin-compression
- 图片压缩:vite-plugin-imagemin
- 辅助开发:vite-plugin-vue-devtools
- 打包进度条:vite-plugin-progress
- 代码规范:eslint、prettier
项目截图




项目结构

使用说明
# 克隆项目
git clone https://gitee.com/shareloke/macos-web-tsx-project.git# 进入项目
cd macos-web-tsx-project# 安装依赖
pnpm i# 运行项目
pnpm dev# 打包发布
pnpm build-prod
源代码地址
gitee:macos-web-tsx-project: vue3+ts+naiveui+jsx 仿macos桌面 (gitee.com)
写在最后:组织语言有限,不知道要怎么写详细的文档,详情的情况可以自行查阅代码,有不足的地方多多提建议,有问题可以随时提问,大家一起提高。
相关文章:
vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统
基于 vue3.x typescript vite naive ui tailwindcss jsx vue-router pinia,项目使用 tsx 作为模版输出,全程没有使用vue提供的SFC, 仿macos桌面前端项目,开源免费模版,希望减少工作量和学习新技术,希…...
揭秘,用软件一秒识别纸质表格数字,找到你想要的一串数字
要将纸质表格的数字快速用软件识别并找出特定的一串数字,以下是三种常用的方案: 方案一:使用OCR软件识别和搜索功能 1. 扫描纸质表格并保存为图像或PDF格式。 2. 使用OCR(光学字符识别)软件,如金鸣表格文字…...
解析图片文件格式
图片文件幻数 关于JPEG格式 二进制形式打开文件,文件开始字节为FF D8,文件结束两字节为FF D9 JPEG 文件有两种不同的元数据格式:JFIF 和 EXIF。 JFIF 以 ff d8 ff e0 开头,EXIF 以 ff d8 ff e1 开头。 代码示例 private static…...
新的“HTTP/2 快速重置”零日攻击打破了 DDoS 记录
自 8 月份以来,一种名为“HTTP/2 快速重置”的新 DDoS(分布式拒绝服务)技术已被作为零日漏洞积极利用,其规模打破了之前的所有记录。 Amazon Web Services、Cloudflare 和 Google 今天联合发布了有关零日技术的消息,他…...
现代化战机之路:美国空军U-2侦察机基于Jenkins和k8s的CI/CD架构演进
▲ 点击上方"DevOps和k8s全栈技术"关注公众 华为北京研究所Q27大楼 随着技术的不断进步,军事领域也在积极采纳现代化工具来提高战备水平和效率。美国空军的U-2侦察机项目是一个鲜明的例子,它成功地借助Jenkins和Kubernetes(k8s&…...
Linux中常用的软件:Squid
在Linux系统中,有许多不同的代理软件可供选择。本文将比较两个常用的代理软件: Squid。我们将介绍它们的特点、使用场景和优缺点,帮助您选择适合自己需求的代理软件。 - 支持多种加密协议,包括AES、ChaCha20和RC4等,可…...
Ali MaxCompute SDK
ALI MC 文件读写 public abstract BufferedInputStream readResourceFileAsStream(String var1) throws IOException;LocalExecutionContext.java Overridepublic BufferedInputStream readResourceFileAsStream(String resourceName) throws IOException {try {return wareHou…...
解决element中table在页面切换时候表格底部出现空白
activated(){ this.$refs.table.doLayout() } activated()是Vue中一个很重要的生命周期函数,它是在组件大概率会被复用时调用的。当组件被复用时,原来的组件的数据和状态必须得到保留。activated()函数能够保持组件在别处被活化时的状态数据。 activat…...
Vue中对路由的进阶学习
路由进阶 文章目录 路由进阶1、路由的封装抽离2、声明式导航2.1、导航链接2.2、高亮类名2.3、跳转传参2.4、动态路由参数可选符 3、Vue路由--重定向4、Vue路由--4045、Vue路由–模式设置6、编程式导航6.1、基本跳转6.2、跳转传参 路由基础入门 1、路由的封装抽离 问题&#x…...
Vuex的同步存值与取值及异步请求
前言 1.概念 Vuex是一个用于管理Vue.js应用程序中状态的状态管理模式和库。Vue.js是一个流行的JavaScript框架,用于构建用户界面,而Vuex则专门用于管理应用程序的状态,以确保状态在整个应用程序中保持一致和可维护。 2.Vuex的特点…...
【Python爬虫 js渲染思路一】
Python爬虫 破解js渲染思路一 当我们在谈论网页js渲染的时候,我们在谈论什么 js渲染网页,从某种程度来说,是指单纯的http请求,返回的文本数据,与我们在浏览器看到的内容,相距甚远.其可包括为以下几点&…...
智慧安防AI视频智能分析云平台EasyCVR加密机授权小tips
视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同,支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强,视频能力丰富,具体可实现视频监控直播、视频轮播、视频录像、…...
C# Windows 窗体控件中的边距和填充
可以将 Margin 属性、Left、Top、Right、Bottom 的每个方面设置为不同的值,也可以使用 All 属性将它们全部设置为相同的值。 在代码中设置Margin,元素的左边设置为5个单位、上边设置为10个单位、右边设置为15个单位和下边设置为20个单位。 TextBox myT…...
腾讯云2核4G轻量服务器5M带宽支持多少人同时在线?
腾讯云轻量2核4G5M带宽服务器支持多少人在线访问?5M带宽下载速度峰值可达640KB/秒,阿腾云以搭建网站为例,假设优化后平均大小为60KB,则5M带宽可支撑10个用户同时在1秒内打开网站,从CPU内存的角度,网站程序效…...
01 初识FPGA
01 初识FPGA 一.FPGA是什么 FPGA(Filed Programmable Gate Array),现场可编程门阵列,一种以数字电路为主的集成芯片,属于可编程逻辑器件PLD的一种。 1.1 两大巨头 Xilinx(赛灵思)Altera(阿尔特拉&#…...
设备巡检管理系统与隐患排查治理
如何才能将设备巡检做细做规范呢? 1.制定巡检制度和流程:通过建立明确的巡检制度和流程,并将其纳入企业的安全管理体系中。利用凡尔码平台制定一个详细的巡检计划,包括巡检的时间、地点、内容、检查方法和注意事项等,帮…...
linux之cpu模拟负载程序
工作中我们经常会遇到这样的问题,需要模拟cpu的负载程序,例如模拟cpu占有率抬升10%、20%、50%、70%等,那这样的程序应该如何实现呢?它的原理是什么样的呢? 思想 创建一个应用程序,该应用程序的作用可以根…...
zookeeper节点数据类型介绍及集群搭建
一、zookeeper介绍 zookeeper官网:Apache ZooKeeper zookeeper是一个分布式协调框架,保证的是CP,即一致性和分区容错性;zookeeper是一个分布式文件存储系统,文件节点可以存储数据,监听子文件节点等可以实…...
Spring: @ComponentScan注解,不设置basePackages时,为什么会扫描该注解所在的包?
ComponentScanAnnotationParser类的parse方法: 可以看到如果没配置basePackages,会调用ClassUtils的静态方法getPackageName将声明ComponentScan的类所在的包添加到basePackages中去...
DiffusionDet:第一个用于物体检测的扩散模型(DiffusionDet: Diffusion Model for Object Detection)
提出了一种新的框架——DiffusionDet,它将目标检测定义为一个从有噪声的盒子到目标盒子的去噪扩散过程。在训练阶段,目标盒从真实值盒扩散到随机分布,模型学会了逆转这个噪声过程。 在推理中,该模型以渐进的方式将一组随机生成的框…...
RMBG-2.0图文实战手册:发丝/毛边/半透明物体精准抠图案例集
RMBG-2.0图文实战手册:发丝/毛边/半透明物体精准抠图案例集 1. 开篇:当抠图遇上AI魔法 你有没有遇到过这样的烦恼?想给产品拍张美美的白底图,结果边缘总是毛毛糙糙;想给人物换个背景,头发丝却和原背景难舍…...
革新性硬件控制工具:OmenSuperHub实现游戏本性能优化与完全掌控
革新性硬件控制工具:OmenSuperHub实现游戏本性能优化与完全掌控 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普暗影精灵系列游戏本设计的开源硬件控制工具,提供完全离线的…...
智能网联汽车(CAV)缩略语大全:从C-V2X到VRUCW,一文搞懂所有专业术语
智能网联汽车(CAV)术语全解析:从技术原理到场景应用 在智能交通系统快速发展的今天,智能网联汽车(Connected-Automated Vehicle, CAV)已经成为行业变革的核心驱动力。无论是汽车工程师、软件开发人员还是交通规划者,都需要掌握这一领域的关键…...
雀魂智能辅助:从零构建你的AI麻将教练系统
雀魂智能辅助:从零构建你的AI麻将教练系统 【免费下载链接】Akagi A helper client for Majsoul 项目地址: https://gitcode.com/gh_mirrors/ak/Akagi 想在雀魂对局中获得实时AI分析与策略指导?雀魂智能辅助系统通过深度学习技术,为玩…...
云原生实战:如何用GROUP模型提升容器工作负载预测准确率(附避坑指南)
云原生实战:如何用GROUP模型提升容器工作负载预测准确率(附避坑指南) 在云原生架构中,容器资源管理一直是DevOps团队面临的重大挑战。传统单容器预测方法往往忽视了微服务间复杂的协同关系,导致预测误差居高不下。本文…...
Ryujinx:高性能Nintendo Switch模拟器技术指南
Ryujinx:高性能Nintendo Switch模拟器技术指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx Ryujinx是一款采用C#开发的开源Nintendo Switch模拟器,它通过精确…...
百川2-13B-4bits量化版精度测试:OpenClaw自动化任务准确率对比
百川2-13B-4bits量化版精度测试:OpenClaw自动化任务准确率对比 1. 测试背景与实验设计 上周在部署OpenClaw自动化工作流时,我遇到了一个现实问题:本地显卡只有12GB显存,跑不动原版13B模型。于是尝试了百川2-13B的4bits量化版本&…...
深度解析 ConcurrentHashMap 1.8:put 与 get 核心流程全解
在 Java 并发编程中,ConcurrentHashMap 是线程安全的高频使用集合,相比线程不安全的 HashMap、效率低下的 HashTable(全锁),JDK 1.8 版本的 ConcurrentHashMap 做了底层结构重构和锁机制优化,成为高并发场景…...
避坑指南:UR5e机器人SpeedL模式下的笛卡尔空间控制,如何避免奇异点和超限?
UR5e机器人SpeedL模式避坑实战:笛卡尔空间控制的三大安全策略 实验室里,机械臂突然发出刺耳的警报声——这可能是每个UR5e初学者都经历过的噩梦。当你在笛卡尔空间用SpeedL指令控制机器人画复杂轨迹时,关节超限、奇异点问题和自碰撞就像三个隐…...
Phi-4-Reasoning-Vision行业落地:教育领域图像题解与隐藏线索识别案例
Phi-4-Reasoning-Vision行业落地:教育领域图像题解与隐藏线索识别案例 1. 项目背景与价值 在教育领域,图像题解和隐藏线索识别一直是教学和考试中的难点。传统方法依赖人工标注和分析,效率低下且容易遗漏关键信息。Phi-4-Reasoning-Vision多…...
