基于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小時內刪除侵權內容。