vite7-vue3-os网页os管理|vue3+vite7+arco.design网页pc版webos系统

最新研发Vite7+Vue3+Pinia3+Arco仿macos/windows网页版webos管理系统。
vite7-webos原创基于vite7.1+vue3.5+pinia3+arco-design+echarts从0-1搭建pc网页版os式管理系统模板。支持macos+windows两种桌面布局风格、自定义桌面栅格模板、可拖拽栅格菜单/dock菜单等功能。

技术栈

• 编辑器：VScode
  
• 技术框架：vite7.1.2+vue3.5.18+vue-router4.5.1+pinia3
  
• 组件库：arco-design^2.57.0 (字节桌面版vue3组件库)
  
• 状态管理：pinia^3.0.3
  
• 图表插件：echarts^6.0.0
  
• 拖拽组件：sortablejs^1.15.6
  
• 模拟数据：mockjs^1.1.0
  
• 样式编译：sass^1.92.1
  
• 构建工具：vite^7.1.2
  

项目框架目录

使用最新前端构建工具 vite7 搭建项目，采用 vue3 setup 语法糖开发页面。

vite7-vue3-webos网页os系统已经更新到我的原创作品集。

vite7+vue3+arco-design仿macOS网页版os管理系统

项目入口配置main.js

1. import { createApp } from 'vue'
2. import './style.scss'
3. import App from './App.vue'
5. // 引入arco.design组件库
6. import ArcoDesign from '@arco-design/web-vue'
7. import '@arco-design/web-vue/dist/arco.css'
8. // 额外引入图标库
9. import ArcoIcon from '@arco-design/web-vue/es/icon'
10. import VEPlus from 've-plus'
11. import 've-plus/dist/ve-plus.css'
13. // 引入路由及状态管理
14. import Router from './router'
15. import Pinia from './pinia'
17. createApp(App)
18. .use(ArcoDesign)
19. .use(ArcoIcon)
20. .use(VEPlus)
21. .use(Router)
22. .use(Pinia)
23. .mount('#app')

复制代码

桌面布局结构

支持macos和windows两种桌面布局风格。

1. <template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template>

复制代码

1. <template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template><template>
6.   
7.     <component :is="DeskLayout[appstate.config.layout]" />
8.   
9. </template><template>
10.   
11.     <component :is="DeskLayout[appstate.config.layout]" />
12.   
13. </template><template>
14.   
15.     <component :is="DeskLayout[appstate.config.layout]" />
16.   
17. </template><template>
18.   
19.     <component :is="DeskLayout[appstate.config.layout]" />
20.   
21. </template><template>
22.   
23.     <component :is="DeskLayout[appstate.config.layout]" />
24.   
25. </template>      

复制代码

vue3-webos桌面栅格模板

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

复制代码

桌面菜单配置参数

1. /**
2. * ====== desk菜单配置项 ======
3. * label 图标标题
4. * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
5. * path 跳转路由页面
6. * link 跳转外部链接
7. * hideLabel 是否隐藏图标标题
8. * filter 是否禁用拖拽
9. * background 自定义图标背景色
10. * color 自定义图标颜色
11. * size 栅格磁贴布局(16种) 1x1 ... 12x12
12. * padding 内边距
13. * onClick 点击图标回调函数
14. * children 二级菜单
15. */

复制代码

配置children参数，支持弹窗显示二级菜单。

桌面菜单代码片段

1. const deskMenu = [  {    uid: '9a16fb90-12c4-11e1-840d-1a25c5bb775a',    list: [      ...      {label: '日历', imgico: markRaw(Calendar4x2), size: '4x2'},      {label: '每日箴言', imgico: markRaw(DayTalk), size: '3x2'},      {label: '倒计时', imgico: markRaw(CountDown), size: '3x2'},      {label: 'DeepSeek', imgico: 'https://cdn.deepseek.com/logo.png', link: 'https://chat.deepseek.com/', size: '2x1'},      {label: 'Vite^7.1.2', imgico: 'https://vite.dev/logo.svg', link: 'https://vite.dev/'},    ]  },  {    uid: '9a16fb90-12c4-11e1-840d-1c25d5cc775a',    list: [      {label: 'Appstore', imgico: '/static/mac/appstore.png'},      {label: '地图', imgico: '/static/mac/maps.png'},      {label: '浏览器', imgico: '/static/mac/safari.png'},      ...    ]  },  {    uid: '9a16fb90-12c4-11e1-840d-7d25e5ff775a',    list: [      {label: 'Vite7.1.2', imgico: 'vite.svg', link: 'https://vite.dev/', background: '#EAFAFF', padding: '20px', size: '2x2'},      {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#607d8b', size: '2x1'},      {label: '码云Gitee', imgico: '/static/svg/gitee.svg', link: 'https://gitee.com/', background: '#bb2124', size: '1x2'},      ...    ]  },  {    uid: 'u738f210-807e-1e4e-1550-4deefac27e48',    list: [      {label: 'DeepSeek', imgico: 'https://cdn.deepseek.com/logo.png', link: 'https://chat.deepseek.com/', size: '3x2'},      {label: '豆包', imgico: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/static/image/OnboardingAvatar.0f4f29a4.webp', size: '2x2'},      ...    ]  },  {    uid: 'd141f210-207e-1e8e-9950-9heefyu27e48',    list: [      {label: 'Vite^7.1.2', imgico: 'https://vite.dev/logo.svg', link: 'https://vite.dev/'},      {<template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template>label: '编程开发',<template>
6.   
7.     <component :is="DeskLayout[appstate.config.layout]" />
8.   
9. </template>children: [<template>
10.   
11.     <component :is="DeskLayout[appstate.config.layout]" />
12.   
13. </template>  {label: 'DeepSeek', imgico: 'https://www.faxianai.com/wp-content/uploads/2025/02/20250205134524-1febd.png', link: 'https://chat.deepseek.com/',},<template>
14.   
15.     <component :is="DeskLayout[appstate.config.layout]" />
16.   
17. </template>  ...<template>
18.   
19.     <component :is="DeskLayout[appstate.config.layout]" />
20.   
21. </template>]      },      {label: '首页', imgico: markRaw(IconHome), path: '/home', color: '#fff'},      {<template>
22.   
23.     <component :is="DeskLayout[appstate.config.layout]" />
24.   
25. </template>label: '组件',<template>
26.   
27.     <component :is="DeskLayout[appstate.config.layout]" />
28.   
29. </template>children: [<template>
30.   
31.     <component :is="DeskLayout[appstate.config.layout]" />
32.   
33. </template>  {label: '表格', imgico: '/static/svg/table.svg', path: '/components/table/all'},<template>
34.   
35.     <component :is="DeskLayout[appstate.config.layout]" />
36.   
37. </template>  ...<template>
38.   
39.     <component :is="DeskLayout[appstate.config.layout]" />
40.   
41. </template>]      },      {<template>
42.   
43.     <component :is="DeskLayout[appstate.config.layout]" />
44.   
45. </template>label: '个人中心',<template>
46.   
47.     <component :is="DeskLayout[appstate.config.layout]" />
48.   
49. </template>children: [<template>
50.   
51.     <component :is="DeskLayout[appstate.config.layout]" />
52.   
53. </template>  {label: '主页', imgico: '/static/svg/my.svg', path: '/setting'},<template>
54.   
55.     <component :is="DeskLayout[appstate.config.layout]" />
56.   
57. </template>  {label: '用户管理', imgico: markRaw(IconUser), path: '/user', color: '#fff'},<template>
58.   
59.     <component :is="DeskLayout[appstate.config.layout]" />
60.   
61. </template>  ...<template>
62.   
63.     <component :is="DeskLayout[appstate.config.layout]" />
64.   
65. </template>]      },      {<template>
66.   
67.     <component :is="DeskLayout[appstate.config.layout]" />
68.   
69. </template>label: '设置',<template>
70.   
71.     <component :is="DeskLayout[appstate.config.layout]" />
72.   
73. </template>children: [<template>
74.   
75.     <component :is="DeskLayout[appstate.config.layout]" />
76.   
77. </template>  {label: '网站设置', imgico: '/static/svg/settings.svg', path: '/setting/system/website'},<template>
78.   
79.     <component :is="DeskLayout[appstate.config.layout]" />
80.   
81. </template>  {label: '邮件服务', imgico: '/static/mac/mail.png', path: '/setting/system/mail'},<template>
82.   
83.     <component :is="DeskLayout[appstate.config.layout]" />
84.   
85. </template>]      },      {<template>
86.   
87.     <component :is="DeskLayout[appstate.config.layout]" />
88.   
89. </template>label: '公众号', imgico: markRaw(IconWechat), color: '#07c160',<template>
90.   
91.     <component :is="DeskLayout[appstate.config.layout]" />
92.   
93. </template>onClick: () => {<template>
94.   
95.     <component :is="DeskLayout[appstate.config.layout]" />
96.   
97. </template>  ...<template>
98.   
99.     <component :is="DeskLayout[appstate.config.layout]" />
100.   
101. </template>}      },    ]  }]

复制代码

vue3-webos自定义dock菜单

1. <template>
2.   
3.     <component :is="DeskLayout[appstate.config.layout]" />
4.   
5. </template><template>
6.   
7.     <component :is="DeskLayout[appstate.config.layout]" />
8.   
9. </template><template>
10.   
11.     <component :is="DeskLayout[appstate.config.layout]" />
12.   
13. </template>      {{item.label}}<template>
14.   
15.     <component :is="DeskLayout[appstate.config.layout]" />
16.   
17. </template><template>
18.   
19.     <component :is="DeskLayout[appstate.config.layout]" />
20.   
21. </template><template>
22.   
23.     <component :is="DeskLayout[appstate.config.layout]" />
24.   
25. </template><template>
26.   
27.     <component :is="DeskLayout[appstate.config.layout]" />
28.   
29. </template><template>
30.   
31.     <component :is="DeskLayout[appstate.config.layout]" />
32.   
33. </template><template>
34.   
35.     <component :is="DeskLayout[appstate.config.layout]" />
36.   
37. </template><template>
38.   
39.     <component :is="DeskLayout[appstate.config.layout]" />
40.   
41. </template><template>
42.   
43.     <component :is="DeskLayout[appstate.config.layout]" />
44.   
45. </template><template>
46.   
47.     <component :is="DeskLayout[appstate.config.layout]" />
48.   
49. </template>  ...<template>
50.   
51.     <component :is="DeskLayout[appstate.config.layout]" />
52.   
53. </template><template>
54.   
55.     <component :is="DeskLayout[appstate.config.layout]" />
56.   
57. </template><template>
58.   
59.     <component :is="DeskLayout[appstate.config.layout]" />
60.   
61. </template><template>
62.   
63.     <component :is="DeskLayout[appstate.config.layout]" />
64.   
65. </template><template>
66.   
67.     <component :is="DeskLayout[appstate.config.layout]" />
68.   
69. </template><template>
70.   
71.     <component :is="DeskLayout[appstate.config.layout]" />
72.   
73. </template><template>
74.   
75.     <component :is="DeskLayout[appstate.config.layout]" />
76.   
77. </template><template>
78.   
79.     <component :is="DeskLayout[appstate.config.layout]" />
80.   
81. </template><template>
82.   
83.     <component :is="DeskLayout[appstate.config.layout]" />
84.   
85. </template><template>
86.   
87.     <component :is="DeskLayout[appstate.config.layout]" />
88.   
89. </template><template>
90.   
91.     <component :is="DeskLayout[appstate.config.layout]" />
92.   
93. </template><template>
94.   
95.     <component :is="DeskLayout[appstate.config.layout]" />
96.   
97. </template>    ...<template>
98.   
99.     <component :is="DeskLayout[appstate.config.layout]" />
100.   
101. </template><template>
102.   
103.     <component :is="DeskLayout[appstate.config.layout]" />
104.   
105. </template><template>
106.   
107.     <component :is="DeskLayout[appstate.config.layout]" />
108.   
109. </template><template>
110.   
111.     <component :is="DeskLayout[appstate.config.layout]" />
112.   
113. </template><template>
114.   
115.     <component :is="DeskLayout[appstate.config.layout]" />
116.   
117. </template><template>
118.   
119.     <component :is="DeskLayout[appstate.config.layout]" />
120.   
121. </template><template>
122.   
123.     <component :is="DeskLayout[appstate.config.layout]" />
124.   
125. </template><template>
126.   
127.     <component :is="DeskLayout[appstate.config.layout]" />
128.   
129. </template><template>
130.   
131.     <component :is="DeskLayout[appstate.config.layout]" />
132.   
133. </template><template>
134.   
135.     <component :is="DeskLayout[appstate.config.layout]" />
136.   
137. </template><template>
138.   
139.     <component :is="DeskLayout[appstate.config.layout]" />
140.   
141. </template>[align=center][img]https://www.33rz.com/item.imgico[/img][/align]<template>
142.   
143.     <component :is="DeskLayout[appstate.config.layout]" />
144.   
145. </template><template>
146.   
147.     <component :is="DeskLayout[appstate.config.layout]" />
148.   
149. </template><template>
150.   
151.     <component :is="DeskLayout[appstate.config.layout]" />
152.   
153. </template><template>
154.   
155.     <component :is="DeskLayout[appstate.config.layout]" />
156.   
157. </template><template>
158.   
159.     <component :is="DeskLayout[appstate.config.layout]" />
160.   
161. </template><template>
162.   
163.     <component :is="DeskLayout[appstate.config.layout]" />
164.   
165. </template><template>
166.   
167.     <component :is="DeskLayout[appstate.config.layout]" />
168.   
169. </template><template>
170.   
171.     <component :is="DeskLayout[appstate.config.layout]" />
172.   
173. </template><template>
174.   
175.     <component :is="DeskLayout[appstate.config.layout]" />
176.   
177. </template><template>
178.   
179.     <component :is="DeskLayout[appstate.config.layout]" />
180.   
181. </template><template>
182.   
183.     <component :is="DeskLayout[appstate.config.layout]" />
184.   
185. </template>      

复制代码

以上就是vite7+pinia3+arco-design搭建网页版webos系统的一些分享，希望对大家有些帮助~
最后附上几个最新实战项目

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！