Electron32-Vue3-winos:自研vite5+electron32+arco电脑版os管理系统程序

自研electron32+vite5+pinia2+arco.design桌面版os管理系统解决方案。

使用技术

  • 编辑器:vscode
  • 技术框架:vite^5.4.1+vue^3.4.37+vue-router^4.4.3
  • 跨平台框架:electron^32.0.1
  • 组件库:@arco-design/web-vue^2.56.0 (字节前端vue3组件库)
  • 状态插件:pinia^2.2.2
  • 拖拽插件:sortablejs^1.15.2
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^4.19.2
  • 模拟数据:mockjs^1.1.0
  • 打包构建:electron-builder^24.13.3
  • electron+vite插件:vite-plugin-electron^0.28.7

项目结构框架

使用vite5搭建项目模板,整合electron32最新跨平台技术。

Electron32-Vue3-os桌面端os系统已经同步到我的原创作品集。
gf.bilibili.com/item/detail/110695...

electron入口配置

/**
 * electron主线程配置
 * @author andy
 */

import { app, BrowserWindow } from 'electron'

import { WindowManager } from '../src/windows/index.js'

// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true

const createWindow = () => {
  let win = new WindowManager()
  win.create({isMajor: true})
  // 系统托盘管理
  win.trayManager()
  // 监听ipcMain事件
  win.ipcManager()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') app.quit()
})

electron32-os布局模板

<!-- 桌面模板 -->

<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" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="DeskLayout[appstate.config.layout]" />
  </div>
</template>

<script setup>
  import Wintool from '@/layouts/components/wintool/index.vue'
  import Desk from '@/layouts/components/mac/desk.vue'
  import Dock from '@/layouts/components/mac/dock.vue'
</script>

<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Wintool />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock />
    </div>
  </div>
</template>

electron32-os桌面模板

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

桌面菜单配置项

/**
  * label 图标标签
  * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont字体图标
  * path 跳转路由地址
  * link 跳转外部链接
  * hideLabel 是否隐藏图标标签
  * background 自定义图标背景色
  * color 自定义图标颜色
  * size 栅格布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
  * onClick 点击图标回调函数
  * children 二级菜单配置  * isNewin 新窗口打开路由页面
  */

桌面菜单json配置示例

const deskMenu = [
  {
    uid: 'd137f210-507e-7e8e-1950-9deefac27e48',
    list: [
      {imgico: markRaw(Today), size: '2x2'},
      {label: '日历', imgico: markRaw(Calendar3x3), size: '3x3'},
      {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},
      // ...
    ]
  },
  {
    uid: 'g270f210-207e-6e8e-2650-9deefac27e48',
    list: [
      {label: 'Appstore', imgico: '/static/mac/appstore.png'},
      // ...
    ]
  },
  {
    uid: 't165f210-607e-4e8e-9950-9deefac27e48',
    list: [
      {label: 'Vue.js', imgico: '/vue.svg', link: 'https://vuejs.org/',},
      {label: 'Vite.js官方文档', imgico: '/vite.svg', link: 'https://vitejs.dev/',},
      // ...
    ]
  },
  {
    uid: 'u327f210-207e-1e8e-9950-9deefac27e48',
    list: [
      {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},
      {label: '首页', imgico: markRaw(IconHome), path: '/home', color: '#fff', isNewin: true},
      {label: '工作台', imgico: 'elec-icon-dotchart', path: '/home/dashboard', color: '#fff'},
      // ...
      {
        label: '用户中心',
        children: [
          {label: '主页', imgico: '/static/svg/ucenter.svg', path: '/setting'},
          {label: '用户管理', imgico: markRaw(IconUserGroup), path: '/user', color: '#fff'},
          // ...
        ]
      },
      {
        label: '设置',
        children: [
          // ...
        ]
      },
      {
        label: '收藏网址',
        children: [
          {label: 'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},
          {label: 'Vite.js', imgico: '/vite.svg',},
          // ...
        ]
      },
      {
        label: '公众号', imgico: '/static/qrimg.png', color: '#07c160',
        onClick: () => {
          Modal.info({
            // ...
          })
        }
      },
    ]
  }
]

博客:Electron31-vite5-chat:原创vue3+electron31+pinia2客户端聊天exe应...

博客:uniapp-weos:原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端...

博客:uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端...

以上就是electron32+vue3实战开发桌面端os系统的一些分享。希望大家可以喜欢~

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
65
粉丝
52
喜欢
108
收藏
57
排名:356
访问:2.7 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
2
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
2
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
4
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
2
flutter3直播
1
flutter3-macos
1
flutter3-osx
2
flutter3桌面os
2
flutter3仿macOS
1
uniapp+vue3聊天
1
uniapp+vue3仿微信
1
uniapp+vue3聊天app
1
uniapp-vue3-wchat
1
uni-vue3-os
1
uniapp+vue3手机后台
1
uniapp-admin
1
uniapp+vue3仿ios桌面
1
uniapp+vite5后台管理
1
flutter3-osadmin
1
flutter3手机后台
1
vite-vue3-chat
1
vite-webchat
1
vue3-chat聊天
1
vite5仿微信
1
electron31+vue3聊天室
1
vite5+electron31仿微信
1
electron31-vite5-wechat聊天
1
electron31聊天exe
1
vue3+electron桌面聊天
1
vue3-webos
1
vue3-macos
1
vue3网页版os
1
vite-os
1
electron31-vue3-admin
1
vite5-electron31-admin
1
vue3+electron31后台系统
1
electron31+vite5桌面端后台
1
electron31轻量级后台
1
electron32-os
1
vue3+electron32桌面os
1
electron32-macos
1
electron32-winos
1
electron-osx
1
tauri2.0
2
tauri2+vue3仿微信
1
tauri2+vite.js聊天
1
tauri2.0+vue3客户端聊天
1
HarmonyOS
1
tauri2-admin
1
tauri2-vue3-admin
1
vue3+tauri2桌面后台
1
tauri2+vite后台系统
1
harmony-chat
1
鸿蒙仿微信
1
鸿蒙聊天app
1
uniapp+vue3酒店预订
1
vue3+uniapp预约酒店
1
uniapp酒店预订
1
uniapp仿携程
1
uniapp仿同程
1
vue3酒店预订
1
tauri2-os
1
tauri2.0-vue3-os
1
tauri2+vue3桌面os
1
tauri2-macos
1
tauri2-winos
1
tauri2.0仿macos
1
tauri2+vite桌面端os
1
flutter3直播app
1
flutter3仿抖音app
1
flutter3短视频直播
1
flutter3聊天室
1
flutter3仿携程
1
flutter3-trip
1
flutter3酒店预订
1
flutter3预约酒店app
1
flutter3旅行酒店app
1
vue3+deepseek
1
vue3-deepseek-chat
1
vue3仿deepseek流式ai
2
vue3智能ai聊天
1
vue3+deepseek-v3
1
vue3网页版ai
1
vue3-web-deepseek
1
vue3.5-webseek
1
electron35+deepseek
1
electron35仿deepseek
1
electron35仿豆包AI
1
electron35桌面端ai
1
electron35-vue3ai
1
社区赞助商