简介面向基于Electron与Vue构建跨平台桌面应用的开发者这款界面模板解决了桌面端最易卡壳的窗口交互细节已处理好窗口最大化/最小化逻辑、支持应用主题动态变色并提前实现登录窗体的透明背景效果使开发者无需再为系统底层能力分心可直接聚焦于Vue组件与业务逻辑的编写。压缩包共46个文件约1.94MB包含10个Vue页面组件、9个JavaScript脚本主进程/路由/store、16张界面配图、CSS样式以及babel、vue.config等工程配置目录结构规范适合具备一定Vue与Electron基础、希望快速搭建桌面应用骨架的中级开发者。模板自带首页、列表页、登录页等示例完整提供electron.js窗口控制、menu.js菜单逻辑和路由/状态管理模块参照即可理解整套项目组织方式。目前已有2316人学习下载运行该模板即可获得一个可直接扩展的起步工程显著降低从零搭建环境的成本。 做桌面工具这行这几年我最大的感觉就是大家不是不想用 Electron Vue而是每次开工都被“界面怎么搭”绊住。菜单栏、侧边栏、顶栏、设置页、主题切换这套东西每个项目都得重写一遍。今天分享的这套 electron-vue 桌面应用界面模板就是把“桌面应用最常见的那套骨架”提前做好你用的时候只需要往里填业务。这套东西尤其适合两类人一是想给按键精灵、自动化脚本这类工具加一个体面 GUI 外壳的开发者二是公司内部要快速交付管理类、工具类桌面应用的前端团队。全文不吹概念只讲实际能落地的选型、结构和代码组织方式你照着搬就能省掉前期至少三到五天的搭架子时间。1. 为什么你需要一套界面模板而不是从零搭骨架先聊一个真实的场景。我见过不少团队做桌面应用的流程是Electron 官方 demo 拉下来Vue 这边再初始化一个项目然后把两个目录拼在一起。听起来不难但真正开始写界面的时候问题全冒出来了。窗口边框是系统默认的控制按钮丑得没法看菜单栏和 Vue Router 的联动没人接设置页的数据持久化又得重新设计。光是这些“和业务无关”的活就够你折腾好几天。界面模板解决的就是这个问题把桌面应用里“不变”的部分全部固定下来。侧边导航怎么折叠、顶栏什么时候显示最大化按钮、多页面切换时窗口标题怎么同步、深色模式怎么一键切换——这些不是业务但它们决定了你的应用用起来像不像一个“正经的桌面软件”。一份好的模板应该让你拿到手之后能直接开始写业务代码而不是先研究怎么把 Vue 的路由嵌进 Electron 的 BrowserWindow。另外说一个更实际的动机。像按键精灵这种偏向自动化操作的工具传统做法是给脚本配一个 OCX 界面模板在 Windows 上嵌入 ActiveX 控件来做配置面板。这种方式的最大问题是界面风格老、跨平台能力差、前端生态基本用不上。很多老开发者其实早想换掉这套方案但不知道 Electron Vue 能不能平稳接住这些需求。我的答案是能而且这恰恰是界面模板最值得投入的地方——把现代的 Web UI 能力和传统的 Windows 本地能力拼接到一起让一个工具类应用既有科技感的外壳又能调用底层的系统能力。后面我会专门讲这块的落地方案。2. 选型判断electron-vue 老脚手架该不该继续用既然标题里带了“electron-vue”我就先把这个问题说透因为它坑过很多人。早期有一个专门叫 electron-vue 的脚手架项目作者是 SimulatedGREG用的 Vue 2 Webpack 4当年确实火过一阵。但问题是这个项目很早就停止维护了依赖的老版本 Webpack、旧版 Babel 在现在的新机器上跑起来各种兼容性问题层出不穷。我建议新项目不要再用那个老脚手架但完全可以保留它的界面设计思路——侧边栏 多页面导航 独立设置页——用更新的工具链去实现。现在主流的选型方案有两个我分别说一下使用感受。方案一是electron-vite。它基于 Vite开发体验非常顺主进程、preload、渲染进程三端都给你配置好了热更新启动速度比 Webpack 时代快一个量级。配置结构也很清晰src/main放主进程代码src/preload放预加载脚本src/renderer就是 Vue 应用本体。我个人最推荐这个方案下面的模板结构也会用它来组织。方案二是vue-cli-plugin-electron-builder它是在 Vue CLI 项目里加一个插件。好处是如果你的团队已经习惯了 Vue CLI迁移成本低坏处是 Vue CLI 本身已经进入维护模式再加上 Vite 生态越来越强这个组合的长期维护性不如 electron-vite。还有个考虑点是打包工具。Electron 官方推荐用 Electron Forge社区里用 electron-builder 也很多。我自己更倾向于 electron-builder原因很实在它对多平台打包的脚本化支持更成熟图标、安装包、自动更新都能统一配置文档也全。用 electron-vite 初始化的时候可以顺手把 electron-builder 集成进去。提示很多人问“Electron 版本怎么选”我的建议是直接跟着 electron-vite 当前模板里锁定的版本走不要自己乱选。Electron 官方的版本迭代很快模板维护者一般会及时跟进跟着模板走最省心。3. 模板的目录结构与主进程/渲染进程分工确定好用 electron-vite 之后模板的目录结构建议按下面这种方式组织这是目前我觉得主进程和渲染进程边界最清楚的一套结构electron-vue-template/ ├── build/ # 打包相关资源图标、安装包配置 ├── src/ │ ├── main/ # 主进程代码 │ │ ├── index.js # 应用入口创建窗口 │ │ ├── windows/ # 窗口管理模块 │ │ ├── tray.js # 系统托盘 │ │ ├── menu.js # 应用菜单 │ │ └── ipc/ # 主进程 IPC 处理器 │ ├── preload/ # 预加载脚本 │ │ └── index.js # 通过 contextBridge 暴露 API │ ├── renderer/ # Vue 渲染进程 │ │ ├── src/ │ │ │ ├── views/ # 页面组件 │ │ │ ├── layouts/ # 布局组件侧边栏、顶栏 │ │ │ ├── stores/ # Pinia 状态 │ │ │ ├── router/ # 路由配置 │ │ │ └── styles/ # 全局样式与主题变量 │ │ └── index.html ├── package.json └── electron.vite.config.ts为什么要把主进程代码单独拆一个windows/目录因为我见过太多人把所有窗口逻辑全堆在index.js里写得多了之后文件上千行牵一发动全身。模板里把窗口的创建、窗口配置、生命周期监听全部封装成类新建一个窗口就是 new 一个实例的事。主进程和渲染进程的分工记住一句话能放渲染进程的事就别放主进程。界面渲染、路由跳转、业务逻辑全部在 Vue 这边做主进程只管窗口生命周期、系统托盘、菜单、原生对话框、全局快捷键这类“Web 页面做不到的事”。Vue 这边想调用主进程能力统一通过 preload 里暴露的 API不要直接给渲染进程开 Node 权限。这个设计不仅是安全最佳实践也是后面维护时最省心的结构。如果你之前用过按键精灵这类软件的 OCX 界面模板你会发现这种进程分工的概念其实很像 ActiveX 控件和宿主程序的关系——渲染进程相当于界面部分主进程相当于是中间人把底层能力调度给界面用。只不过 Electron 把这个流程标准化了不用你在一个进程里既画界面又管系统调用。4. 界面框架的核心模块拆解布局、导航、主题和状态模板的重头戏说白了就是下面几个界面模块。把这几个模块做扎实你就能应付绝大多数桌面工具的 UI 需求。4.1 布局方案桌面应用不像网页不该照搬 Web 导航桌面应用的界面布局和网页有个很大的区别窗口可以缩放、可以最大化你必须考虑极窄窗口下的内容展示。我用的布局方案是“左侧固定侧边栏 顶部工具栏 内容区自适应”这也是目前大多数桌面工具和 IDE 的通用布局。侧边栏宽度建议 220px支持折叠到 64px 只显示图标。顶部工具栏高度 48px 到 56px 比较合适太高占内容区太低看不清。内容区用 flex 布局自动填充剩余空间。这套布局在窗口宽度降到 800px 时依然能正常工作不会出现按钮挤成一团的情况。模板里还需要考虑一个细节自定义窗口控制按钮。做桌面应用界面的都知道如果不用系统的原生标题栏而是自己画一个标题栏那最大化、最小化、关闭这三个按钮就得放到顶栏右侧并且通过 preload 暴露的 API 调用主进程的窗口控制方法。这个功能很多人觉得简单真正做的时候才发现“最大化之后图标要切成还原”这种交互细节容易漏。模板里直接做成一个组件省得自己踩一遍。4.2 导航与路由设计菜单数据驱动而不是写死跳转导航菜单如果写死在组件里后面加一个页面就要改组件代码特别烦。模板里我用菜单数据驱动路由把菜单配成数组每个菜单项包含path、title、icon和component信息侧边栏用 v-for 渲染路由也通过动态导入把这些组件注册进来。const menuItems [ { path: /dashboard, title: 运行概览, icon: dashboard, component: () import(../views/Dashboard.vue) }, { path: /automation/scripts, title: 脚本管理, icon: script, component: () import(../views/ScriptList.vue) } ]这样做的好处是后期扩展时只需要在菜单配置里加一项侧边栏和路由自动同步更新。窗口标题的同步逻辑也绑在路由守卫里路由变化时通过预加载接口调用主进程的win.setTitle把窗口标题改成当前页面名称这比每次手动改 title 靠谱得多。4.3 主题与深色模式用 CSS 变量而不是样式穿透现在的桌面应用深浅色模式基本是标配。模板里用 CSS 变量方案实现主题切换不引入 UI 框架的主题包原因是更轻、更好控。你只需要定义一套变量:root { --bg-primary: #ffffff; --bg-sidebar: #f5f5f5; --text-primary: #1a1a1a; --accent-color: #4f6ef2; } [data-themedark] { --bg-primary: #1e1e1e; --bg-sidebar: #252526; --text-primary: #e0e0e0; --accent-color: #6f8aff; }切换主题时往根节点设置>contextBridge.exposeInMainWorld(desktopAPI, { minimizeWindow: () ipcRenderer.invoke(window:minimize), maximizeWindow: () ipcRenderer.invoke(window:maximize), closeWindow: () ipcRenderer.invoke(window:close), onWindowMaximized: (callback) ipcRenderer.on(window:maximized, callback) })这三层设置做完之后Vue 里就只能访问window.desktopAPI下的这几个方法其他什么都碰不到。遥控器上只有你给的几个按钮比把整把钥匙都给它安全得多。6. 打包、调试与排坑从模板到可分发应用界面模板肯定是要交付成可安装的安装包这阶段我踩过不少坑几乎每一个都在模板里做了预先处理。6.1 开发调试流程electron-vite 的开发体验是三个终端并行跑主进程编译、preload 编译、渲染进程跑 Vite Dev Server。第一次跑的时候建议仔细看三端的日志输出特别是 preload 有没有编译报错——preload 脚本编译出错不会立刻让界面崩掉但桌面 API 全是 undefined后面一调就出问题。调试过程中有个习惯很重要每隔一段时间就重启一次 Electron 进程不要一直依赖热更新。主进程代码改动必须重启才能生效只热更新渲染进程会导致主进程和渲染进程的状态不一致有些 bug 重启之后就“消失了”查起来效率很低。6.2 electron-builder 打包的关键配置打包配置直接放在electron-builder.yml里核心配置项包括 appId、productName、图标、目标格式。Windows 下我用 nsis 格式macOS 用 dmgLinux 用 AppImage。productName 建议用英文避免安装路径带中文导致某些原生模块加载失败。打包体积是大家都在意的问题。模板默认做两件事把不用的依赖放进files白名单之外然后在 vite 配置里开启按需构建。Electron 本身的体积省不掉因为内核就这么大但 node_modules 里那些没用的包一定别打进安装包能省出几十 MB。6.3 常见坑的排查清单我打包时最容易撞上的坑整理成一张表现象原因处理办法安装包打出来后打开白屏打包时前端资源路径不对把 base 路径改为相对路径不能用默认的绝对路径点击托盘图标窗口不能聚焦窗口隐藏后状态丢失显隐逻辑统一放主进程管理先判断isVisible()再决定 show 还是 hidedev 模式正常打包后图标丢失图标文件没有包含进打包资源图标放到 build 目录并在打包配置里声明不要在渲染进程里引用源码路径安装之后无法写入配置安装目录无写权限业务数据写到app.getPath(userData)不要写安装目录Electron 二进制下载慢网络问题设置 Electron 镜像地址再重新安装依赖6.4 自动化工具类应用的额外建议如果你做的项目是从按键精灵、OCX 那套传统方案迁过来的我建议界面模板先克制一点不要一上来就想把绝活全用上。第一步先让现代化界面跑起来侧边栏、脚本列表、运行日志这三个页面优先实现。第二步再把本地能力接进来——脚本执行入口、快捷键绑定、托盘运行状态。传统工具的迁移最怕的就是“界面折腾完了底层的脚本引擎反而没对接好”那就本末倒置了。7. 模板改造成自己项目的落地清单最后给一个整个模板落地的操作顺序你跟着这个清单走比直接看代码更清晰改品牌信息先改package.json里的 name、productName再换图标。改主题在 styles 目录下调整 CSS 变量确定应用的主色调和辅助色。加页面在views目录新建 Vue 组件然后把菜单配置插进menuItems数组。接业务 API在渲染进程里统一封装一个api模块用 HTTP 或 WebSocket 对接后端。接本地能力需要调系统能力时在 preload 里加方法主进程 IPC 里写对应 handler。跑一遍打包流程确认安装包能正常安装、运行、更新。这套流程走完之后你的项目就有了一个稳定、可扩展的桌面界面前提。后期加功能你只需要关心业务本身。如果你也是从工具类开发转型过来的希望这套模板能让你少走那些我已经走过的弯路——尤其是选型和架构那块别在旧方案上继续耗了。本文还有配套的精品资源点击获取