Electron13+Vue3+ElementPlus模仿macOS桌面版后台系统框架

2021-06-25 10:15:26 浏览数 (1)

项目介绍

electron-vue3-macOS 一款整合vite2.x electron13跨平台构建模仿mac桌面UI后台管理系统。

基于最新的vite2.x和跨端技术electron13搭建开发。支持多窗口及毛玻璃效果。

前端技术栈

  • 编码工具：Vscode
  • 框架技术：Vite2.3.4 Vue3.0.11 Vuex4 VueRouter@4
  • 跨端框架：Electron13.0.1
  • 打包工具：vue-cli-plugin-electron-builde
  • UI组件库：Element-Plus^1.0.2 (饿了么vue3组件库)
  • 弹窗组件：MacLayer (vue3弹窗v3layer改进版)
  • 图表组件：Echarts^5.1.1
  • 模拟请求：Mockjs1.1.0

功能特性

✅经典的图标 dock菜单模式

✅流畅的操作体验

✅可拖拽桌面 dock菜单

✅符合macOS big sur操作窗口管理

✅丰富的视觉效果，自定义桌面壁纸

✅可视化创建多窗口，支持拖拽/缩放/最大化，可传入自定义组件页面。

项目结构

非常清晰的项目结构目录。采用最新的vue3语法编码开发。

饿了么vue3桌面组件库

项目中使用了element-plus组件库。

安装

代码语言：javascript复制
npm i element-plus -S

引入

代码语言：javascript复制
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

package.json依赖

代码语言：javascript复制
{
  "name": "electron-macui",
  "version": "0.1.0",
  "description": "基于Electron13 Vite2 ElementPlus仿Mac桌面UI后台框架",
  "author": "andy 


	


electron elementui vue.js 




	






	

 0 人点赞