基于vite2+electron13+elementPlus跨端仿mac osx桌面管理

随着跨端技术electron愈来愈成熟，vite.js的不断更新迭代，而且整合开发跨端项目受到很多开发者的热捧。

今天给大家分享electron-vue3-webos 桌面管理系统。基于最新前端技术vite2.3+vue3+electron13+element-plus+echarts+maclayer等技术构架开发的模仿mac osx桌面UI框架EXE程序。

使用技术

编辑器：Vscode

框架技术：Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4

跨端框架：Electron13.0.1

打包工具：vue-cli-plugin-electron-builder

UI组件库：Element-Plus^1.0.2 (饿了么vue3组件库)

弹窗组件：MacLayer (vue3弹窗v3layer改进版)

图表组件：Echarts^5.1.1

模拟请求：Mockjs1.1.0

项目采用标准的vite.js目录结构模式。

渲染进程main.js配置

import { createApp } from 'vue' import App from './App.vue' // 引入Router和Store import Router from './router' import Store from './store' // 引入公共配置 import gPlugins from './plugins' import { winCfg, loadWin } from './windows/actions' loadWin().then(config => { winCfg.window = config createApp(App) .use(Router) .use(Store) .use(gPlugins) .mount('#app') })

electron无边框导航菜单

桌面模板

项目中的桌面分为顶部导航条+桌面菜单+底部程序钨dock菜单三个部分。

vue3仿macos弹窗效果

如上图：项目中的弹窗组件使用的是vue3自定义组件实现功能。可拖拽/缩放/最大化及动态引入.vue组件等功能。

// 引入组件页面 import Home from '@/views/home.vue' v3layer({ type: 'component', content: Home, ... })

桌面菜单配置menu.js

import Home from '@/views/home/index.vue' import ControlPanel from '@/views/home/dashboard.vue' import CustomTpl from '@/views/home/customTpl.vue' import Table from '@/views/component/table/custom.vue' import Form from '@/views/component/form/all.vue' import UserSetting from '@/views/setting/manage/user/index.vue' import Ucenter from '@/views/setting/ucenter.vue' const deskmenu = [ { type: 'component', icon: 'el-icon-monitor', title: '首页', component: Home, }, { type: 'component', icon: 'icon-gonggao', title: '控制面板', component: ControlPanel, }, { type: 'component', img: '/static/mac/reminders.png', title: '自定义组件模板', component: CustomTpl, area: ['600px', '360px'], }, { type: 'iframe', img: '/static/vite.png', title: 'vite.js官方文档', component: 'https://cn.vitejs.dev/', }, { type: 'component', icon: 'el-icon-s-grid', title: '表格', component: Table, }, // ... ]

好了，基于vite.js+electron开发跨端webos桌面管理就分享到这里。希望能喜欢~

Electron Element UI Mac OS Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。