当前位置: 首页 > news >正文

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)

写在最后:组织语言有限,不知道要怎么写详细的文档,详情的情况可以自行查阅代码,有不足的地方多多提建议,有问题可以随时提问,大家一起提高。

http://www.lryc.cn/news/188771.html

相关文章:

  • 揭秘,用软件一秒识别纸质表格数字,找到你想要的一串数字
  • 解析图片文件格式
  • 新的“HTTP/2 快速重置”零日攻击打破了 DDoS 记录
  • 现代化战机之路:美国空军U-2侦察机基于Jenkins和k8s的CI/CD架构演进
  • Linux中常用的软件:Squid
  • Ali MaxCompute SDK
  • 解决element中table在页面切换时候表格底部出现空白
  • Vue中对路由的进阶学习
  • Vuex的同步存值与取值及异步请求
  • 【Python爬虫 js渲染思路一】
  • 智慧安防AI视频智能分析云平台EasyCVR加密机授权小tips
  • C# Windows 窗体控件中的边距和填充
  • 腾讯云2核4G轻量服务器5M带宽支持多少人同时在线?
  • 01 初识FPGA
  • 设备巡检管理系统与隐患排查治理
  • linux之cpu模拟负载程序
  • zookeeper节点数据类型介绍及集群搭建
  • Spring: @ComponentScan注解,不设置basePackages时,为什么会扫描该注解所在的包?
  • DiffusionDet:第一个用于物体检测的扩散模型(DiffusionDet: Diffusion Model for Object Detection)
  • ④. GPT错误:导入import pandas as pd库,存储输入路径图片信息存储错误
  • 和鲸 ModelWhale 与华为 OceanStor 2910 计算型存储完成兼容性测试
  • c++中单例模式的实现和问题
  • 如何选购高效便捷的软件行业项目管理系统
  • 用“和美”丈量中国丨走进酒博物馆系列⑨
  • 树莓派 Raspberry Pi 与YOLOv8 结合进行目标检测
  • centos 安装 percona-xtrabackup
  • 机器学习1:k 近邻算法
  • 知识图谱系列4:neo4j学习
  • Mainflux IoT:Go语言轻量级开源物联网平台,支持HTTP、MQTT、WebSocket、CoAP协议
  • 怎样提取视频中的音频?分享一个一学就会的方法~