vite5-vue3-osx原创macos/windows桌面os系统

xiaoyan_2018 xiaoyan_2018 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

vue3-webos一款原创研发的vite5.x+vue3+pinia2+arco.design仿macOS和windows桌面系统os管理平台。支持自定义desk栅格布局引擎、可拖拽桌面图标、多屏分页管理、自定义桌面壁纸主题、毛玻璃虚化背景等功能。

使用技术 

  • 技术框架:vite5.3.3+vue3.4.31+vue-router4.4+pinia2
  • UI组件库:arco-design^2.55.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.1.7
  • 图表插件:echarts^5.5.1
  • 拖拽组件:sortablejs^1.15.2
  • 富文本编辑器:wangeditor^4.7.15
  • 模拟数据:mockjs^1.1.0
  • 样式编译:sass^1.77.8
  • 构建工具:vite^5.3.3

整个项目使用vite5.x搭建项目框架,采用vue3 setup语法糖编码开发。 

采用全新的栅格化布局引擎。

// 自定义变量(桌面图标)
const deskVariable = ref({
  '--icon-radius': '8px', // 圆角
  '--icon-size': '60px', // 图标尺寸(设置rpx自定义手机设备)
  '--icon-gap-col': '30px', // 水平间距
  '--icon-gap-row': '30px', // 垂直间距
  '--icon-labelSize': '12px', // 标签文字大小
  '--icon-labelColor': '#fff', // 标签颜色
  '--icon-fit': 'contain', // 图标自适应模式
})

 

目前该项目已经正式完结了,如果想要了解更多技术实现细节,可以去看看这篇分享文章。

https://blog.csdn.net/yanxinyun1990/article/details/140701208

 

...全文

相关推荐

评论
收藏 已收藏
分享
返回顶部
xiaoyan_2018
VUE 1,940 成员 865 内容