Vue3 + Vite8 仿 Windows/macOS 网页OS系统实战

原创

xiaoyan2018

发布于 2026-11-06 23:55:25

文章被收录于专栏：前端进阶实战前端进阶实战

vite8-webos 是一款原创的网页版操作系统（WebOS）风格管理模板。它不仅具备现代 Admin 模板的权限控制与数据可视化能力，更在交互层面实现了质的飞跃。

功能特性

🖥️ 双模式桌面：无缝切换 MacOS 灵动布局与 Windows 磁贴布局。
🧩 栅格化引擎：支持自定义桌面图标网格大小、间距及拖拽排序。
🚀 技术栈前沿：基于 Vite8 极速构建，Pinia3 状态管理，ArcoDesign 组件库。
🎨 高度可定制：支持壁纸切换、主题换肤及 Dock 菜单个性化配置。

使用技术框架

分类	名称	版本	说明
技术框架	Vue	3.5.35	渐进式 JavaScript 框架
	Vite	8.0.16	构建工具 & 开发服务器
	Vue Router	5.1.0	Vue 官方路由管理器
	Pinia	3.0.4	Vue 状态管理库
UI 组件库	Arco Design	2.58.0	字节跳动出品 Vue3 桌面端组件库
图表插件	ECharts	6.1.0	百度开源可视化图表库
交互增强	SortableJS	1.15.7	拖拽排序组件
开发辅助	Mock.js	1.1.0	前端模拟数据生成
	Sass	1.100.0	CSS 预处理器
构建工具	Vite	8.0.16	同上（构建 & 打包）

项目目录

引入路由/状态管理及组件库

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入arco.design组件库
import ArcoDesign from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
// 额外引入图标库
import ArcoIcon from '@arco-design/web-vue/es/icon'
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'

// 引入路由及状态管理
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(ArcoDesign)
.use(ArcoIcon)
.use(VEPlus)
.use(Router)
.use(Pinia)
.mount('#app')

桌面布局结构

<script setup>
  import { appState } from '@/pinia/modules/app'

  // 引入布局模板
  import MacosLayout from './template/macos.vue'
  import WindowsLayout from './template/windows.vue'

  const appstate = appState()

  const DeskLayout = {
    macos: MacosLayout,
    windows: WindowsLayout
  }
</script>

<template>
  <div
    class="vu__container desktop flexbox flex-alignc flex-justifyc"
    :style="{'--themeSkin': appstate.config.skin}"
    @contextmenu.prevent
  >
    <component :is="DeskLayout[appstate.config.layout]" />
  </div>
</template>

<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Toolbar />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock />
    </div>
    <!-- 悬浮球(辅助触控) -->
    <Touch />
  </div>
</template>

vue3实现栅格桌面

自定义桌面变量

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