当前位置: 首页 > Web前端 > vue.js

electron13-vue3-macui:基于vite2.x+electron高仿iMac桌面UI管理框架系统

时间:2023-03-31 16:21:02 vue.js

椤圭洰浠嬬粛vite2-electron-macui鏄竴娆捐交閲忕骇鐨勬闈㈢浠縨acbigsur妗岄潰绠$悊妗嗘灦銆備娇鐢ㄦ渶鏂扮殑鎶€鏈爤electron13+vue3+element-plus寮€鍙戝疄鐜般€傛敮鎸佸绐楀彛銆佹嫋鏀炬闈?鍋滈潬鑿滃崟绛夊姛鑳姐€傜壒鐐光渽缁忓吀鍥炬爣+dock鑿滃崟妯″紡鉁呮祦鐣呯殑鎿嶄綔浣撻獙鉁呭彲鎷栧姩妗岄潰+dock鑿滃崟鉁呭吋瀹筸acOSbigsur鎿嶄綔绐楀彛绠$悊鉁呬赴瀵岀殑瑙嗚鏁堟灉锛岃嚜瀹氫箟妗岄潰澹佺焊鉁呰瑙夊垱寤哄涓獥鍙o紝鏀寔鎷栨斁/缂╂斁/鏈€澶у寲锛屽彲浠ヤ紶閫掔粰鑷畾涔夌粍浠堕〉闈€傛妧鏈鏋讹細vite^2.3.4+vue^3.0.11+vuex@4+vue-router4.x璺ㄧ妗嗘灦锛歟lectron^13.0.1缁勪欢搴擄細element-plus^1.0.2鍥捐〃缁勪欢锛歟charts^5.1.1鎷栨嫿鎺掑簭锛歴ortablejs^1.13棰勫鐞嗗櫒锛歴ass^1.34寮圭獥缁勪欢锛歮aclayer婊氬姩鏉★細macscroll椤圭洰缁撴瀯鐩綍鏁翠釜椤圭洰閲囩敤vue3鏈€鏂拌娉曚唬鐮佸紑鍙戙€俻ackage.json渚濊禆淇℃伅{"name":"electron-macui","version":"0.1.0","description":"鍩轰簬Electron13+Vite2+ElementPlus浠縈ac妗岄潰UI鍚庡彴妗嗘灦","author":"andy馃惂锛?82310962","copyright":"MITLicense(MIT)漏2021Andy","scripts":{"dev":"vite","build":"vitebuild","electron:serve":"vue-cli-serviceelectron:serve","electron:build":"vue-cli-serviceelectron:build"},"main":"background.js","dependencies":{"element-plus":"^1.0.2-beta.45","echarts":"^5.1.1","element-resize-detector":"^1.2.2","mockjs":"^1.1.0","sortablejs":"^1.13.0","sass":"^1.34.0","sass-loader":"^10.1.1","vue":"^3.0.11","vue-i18n":"^9.1.6","vue-router":"^4.0.6","vuex":"^4.0.0","wangeditor":"^4.7.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.1","@vue/cli-service":"^4.5.12","@vue/compiler-sfc":"^3.0.5","electron":"^13.0.1","electron-devtools-installer":"^3.1.0","vite":"^2.3.4","vue-cli-plugin-electron-builder":"~2.0.0-rc.6"}}electron鑷畾涔夋棤杈规瀵艰埅涓轰簡淇濇寔鏁翠釜椤圭洰UI鐨勪竴鑷存€э紝绐楀彛閲囩敤鏃犺竟妗嗘ā寮廸rame锛歠alse椤堕儴瀵艰埅鏍忎娇鐢ㄨ嚜瀹氫箟缁勪欢瀹炵幇鍔熻兘锛屾敮鎸佽嚜瀹氫箟鏍囬銆佽儗鏅€佹枃瀛楅鑹茬瓑鍔熻兘锛屼笅鎷夎彍鍗曚娇鐢╡lement-plus涓殑Dropdown缁勪欢瀹炵幇鍔熻兘銆?template>...棣栭〉棣栭〉鎺у埗鍙?/el-dropdown-item>鑷畾涔夐潰鍖呭鑸?/el-dropdown-item>...{{currentDate}}妗岄潰UI妯℃澘濡備笂鍥撅細妗岄潰鑿滃崟鏍忎负鍦ㄥ睆骞曠殑椤堕儴锛孌ock鍦ㄥ睆骞曠殑搴曢儴銆?template>

vue3+electron瀹炵幇dock鑿滃崟濡備笂鍥撅細妗岄潰dock浣跨敤纾ㄧ爞鐜荤拑铏氬寲鑳屾櫙锛屼娇鐢╟ss3瀹炵幇鍔ㄦ€佹樉绀恒€?template>搴旂敤鍟嗗簵鍚姩鏉?/span>...浣跨敤sortablejs閫氳繃鎷栨斁鏀瑰彉鑿滃崟鐨勪綅缃€?/DOCK鑿滃崟鎷栧姩constdragDockMenu=()=>{Sortable.create(dockRef.value,{handle:'.macui__dock-item',filter:'.macui__dock-filter',animation:200,delay:0,onEnd({newIndex,oldIndex}){console.log('NewIndex:',newIndex)console.log('OldIndex:',oldIndex)}})}//鍦板浘绐楀彛constopenMaps=()=>{createWin({title:'map',route:'/map',width:1000,height:500,})}//鏃ュ巻绐楀彛constopenCalendar=()=>{createWin({title:'calendar',route:'/calendar',width:500,height:500,resize:false,})}Vue3鍔ㄦ€佸姞杞界粍浠跺涓婂浘锛氶」鐩腑鐨勫脊绐楀姛鑳芥槸鍩轰簬v3layer鐨勬敼杩涚増锛寁ue3妗岄潰寮圭獥-浠ュ墠寮€鍙戠殑up鎻掍欢銆俬ttps://segmentfault.com/a/11...v3layer鏀寔30+鍙傛暟鑷畾涔夐厤缃紝鏀寔鎷栨嫿銆佸洓瑙掔缉鏀俱€佸叏灞忕瓑鍔熻兘锛屾柊澧炴敮鎸佸姩鎬佽緭鍏ョ殑鍔熻兘缁勪欢椤甸潰銆?/瀵煎叆缁勪欢椤甸潰importHomefrom'@/views/home.vue'v3layer({type:'component',content:Home,...})v3layer({type:'iframe',content:'https://cn.vitejs.dev/',...})杩欐牱浣犲氨鍙互浣跨敤寮瑰嚭绐楀彛鏉ュ姞杞界粍浠舵垨iframe椤甸潰銆傛闈㈣彍鍗曢厤缃甦eskmenu.jsimportHomefrom'@/views/home/index.vue'importControlPanelfrom'@/views/home/dashboard.vue'importCustomTplfrom'@/views/home/customTpl.vue'importTablefrom'@/views/component/table/custom.vue'浠?@/views/component/form/all.vue'瀵煎叆琛ㄥ崟'浠?@/views/setting/manage/user/index.vue'瀵煎叆Ucenterfrom'@/views/setting/ucenter.vue'constdeskmenu=[{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,},//...]electron-builder.json鎵撳寘閰嶇疆{"productName":"electron-macui","appId":"cc.xiaoyan.electron-macui","copyright":"Copyright漏2021-present","author":"PowerByXiaoyan|Q锛?82310962WX锛歺y190310""compression":"maximum","asar":false,"extraResources":[{"from":"./resource","to":"resource"}],"nsis":{"oneClick":false,"allowToChangeInstallationDirectory":true,"perMachine":true,"deleteAppDataOnUninstall":true,"createDesktopShortcut":true,"createStartMenuShortcut":true,"shortcutName":"ElectronMacUI"},"win":{"icon":"./resource/shortcut.ico","artifactName":"${productName}-v${version}-${platform}-${arch}-setup.${ext}","target":[{"target":"nsis","Arch":["ia32"]}]},"mac":{"icon":"./resource/shortcut.icns","artifactName":"${productName}-v${version}-${platform}-${arch}-setup.${ext}"},"linux":{"icon":"./resource","artifactName":"${productName}-v${version}-${platform}-${arch}-setup.${ext}"}}okey锛屼娇鐢╡lectron13+vite2寮€鍙戜豢macBigSur妗岄潰绯荤粺锛屽湪姝ゅ垎浜渶鍚庨檮涓婁竴涓猠lectron+vue3+antdv浠縌Q瀹㈡埛绔」鐩甴ttps://segmentfault銆俢om/a/11...