Electron-Vue 5分钟快速上手如何用 Vue.js 做出跨平台桌面应用【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue想把 Vue.js 项目变成能装到电脑上的桌面应用却不想从零配 Electron、搭构建工具、调系统接口Electron-Vue 就是来解决这件事的它是一个现成的脚手架模板前端开发者几条命令就能得到一个开箱即用的桌面应用项目Vue、路由、状态管理和打包工具都替你配好了。这份指南写给只懂 Vue.js 基础、没碰过 Electron 的新手。看完你会清楚它能做什么、四步怎么跑起来、以及哪些功能最值得先试。️ Electron-Vue 能帮你做出什么适合的场景很直接个人效率工具笔记、待办、本地文件管理这类不需要联网的小工具。团队内部工具需要读写本地系统的能力比如批量处理表单、设备调试面板。创意类应用画板、音效合成器、小游戏。和传统做法的差别一句话就能说清你不用再自己拼构建、打包、调试、测试这一整套工具只写业务代码窗口创建、热重载、开发者工具都是模板里现成的。 Electron-Vue 四步跑起来前提只有一条装好 Node.js建议 14。1. 安装 vue-clinpm install -g vue-cli终端无报错即成功可用vue -V验证。2. 生成项目vue init simulatedgreg/electron-vue my-desktop-app途中会问几个问题ESLint、测试框架等直接回车选默认。看到my-desktop-app目录被创建即成功。3. 安装依赖cd my-desktop-app npm install这一步最慢。Windows 上若报 node-gyp 错误说明缺构建工具文档里有专门说明。4. 启动应用npm run dev成功会弹出一个桌面窗口显示欢迎页和当前路由、Vue、Electron、Node 的版本信息即上图效果。失败就看终端报错先检查 Node 版本再重装依赖。 必须懂的一个概念双进程Electron 应用被拆成两个进程理解这一点后面不迷路。主进程像餐厅的后厨顾客看不见但真正的活都在这里干创建窗口、监听系统事件、访问本地文件全靠 Node.js 的 API。代码在src/main/目录。渲染进程是顾客看得见的用餐区你用 Vue.js 在这里开发界面代码在src/renderer/目录。两者要沟通时比如界面按钮触发保存文件用模板内置的 IPC 桥梁vue-electron调用即可。记住一句话改界面去渲染进程操作系统级的事放主进程。 新手先试这 5 个功能状态管理Vuex已预装。template/src/renderer/store/modules/Counter.js 是一个完整计数器示例照着模式抄就行。路由Vue Router配置在 template/src/renderer/router/index.js加几行规则就是多页面应用。静态资源图片、字体放进static/目录组件里直接引用模板里的 logo 可作参照。打包发布运行npm run build:win32或build:darwin、build:linux即可产出对应平台的安装包docs/cn/using-electron-builder.md 讲了完整配置。测试单元测试Karma Mocha和端到端测试Spectron已配好示例在 template/test/e2e/specs/Launch.spec.js。 文档与示例资源快速开始docs/cn/getting_started.md项目结构详解docs/cn/project_structure.mdWebpack 配置指南docs/cn/webpack-configurations.md打包教程docs/cn/using-electron-builder.md项目自带中、英、日、韩四语言文档。遇到报错先查文档解决不了再去仓库 Issues 提问。开始动手吧Electron-Vue 把脚手架、工具链、打包、测试这些最容易卡住人的部分都打包好了留给你的只有业务代码。现在打开终端按上面的四步命令跑一遍五分钟就能看到属于你自己的桌面窗口。下一步把欢迎页换成你的第一个真实功能。【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/23 10:49:13 · 阅读 1.2k Electron-Vue 5分钟快速上手：如何用 Vue.js 做出跨平台桌面应用
Electron-Vue 5分钟快速上手如何用 Vue.js 做出跨平台桌面应用【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue想把 Vue.js 项目变成能装到电脑上的桌面应用却不想从零配 Electron、搭构建工具、调系统接口Electron-Vue 就是来解决这件事的它是一个现成的脚手架模板前端开发者几条命令就能得到一个开箱即用的桌面应用项目Vue、路由、状态管理和打包工具都替你配好了。这份指南写给只懂 Vue.js 基础、没碰过 Electron 的新手。看完你会清楚它能做什么、四步怎么跑起来、以及哪些功能最值得先试。️ Electron-Vue 能帮你做出什么适合的场景很直接个人效率工具笔记、待办、本地文件管理这类不需要联网的小工具。团队内部工具需要读写本地系统的能力比如批量处理表单、设备调试面板。创意类应用画板、音效合成器、小游戏。和传统做法的差别一句话就能说清你不用再自己拼构建、打包、调试、测试这一整套工具只写业务代码窗口创建、热重载、开发者工具都是模板里现成的。 Electron-Vue 四步跑起来前提只有一条装好 Node.js建议 14。1. 安装 vue-clinpm install -g vue-cli终端无报错即成功可用vue -V验证。2. 生成项目vue init simulatedgreg/electron-vue my-desktop-app途中会问几个问题ESLint、测试框架等直接回车选默认。看到my-desktop-app目录被创建即成功。3. 安装依赖cd my-desktop-app npm install这一步最慢。Windows 上若报 node-gyp 错误说明缺构建工具文档里有专门说明。4. 启动应用npm run dev成功会弹出一个桌面窗口显示欢迎页和当前路由、Vue、Electron、Node 的版本信息即上图效果。失败就看终端报错先检查 Node 版本再重装依赖。 必须懂的一个概念双进程Electron 应用被拆成两个进程理解这一点后面不迷路。主进程像餐厅的后厨顾客看不见但真正的活都在这里干创建窗口、监听系统事件、访问本地文件全靠 Node.js 的 API。代码在src/main/目录。渲染进程是顾客看得见的用餐区你用 Vue.js 在这里开发界面代码在src/renderer/目录。两者要沟通时比如界面按钮触发保存文件用模板内置的 IPC 桥梁vue-electron调用即可。记住一句话改界面去渲染进程操作系统级的事放主进程。 新手先试这 5 个功能状态管理Vuex已预装。template/src/renderer/store/modules/Counter.js 是一个完整计数器示例照着模式抄就行。路由Vue Router配置在 template/src/renderer/router/index.js加几行规则就是多页面应用。静态资源图片、字体放进static/目录组件里直接引用模板里的 logo 可作参照。打包发布运行npm run build:win32或build:darwin、build:linux即可产出对应平台的安装包docs/cn/using-electron-builder.md 讲了完整配置。测试单元测试Karma Mocha和端到端测试Spectron已配好示例在 template/test/e2e/specs/Launch.spec.js。 文档与示例资源快速开始docs/cn/getting_started.md项目结构详解docs/cn/project_structure.mdWebpack 配置指南docs/cn/webpack-configurations.md打包教程docs/cn/using-electron-builder.md项目自带中、英、日、韩四语言文档。遇到报错先查文档解决不了再去仓库 Issues 提问。开始动手吧Electron-Vue 把脚手架、工具链、打包、测试这些最容易卡住人的部分都打包好了留给你的只有业务代码。现在打开终端按上面的四步命令跑一遍五分钟就能看到属于你自己的桌面窗口。下一步把欢迎页换成你的第一个真实功能。【免费下载链接】electron-vueAn Electron Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.项目地址: https://gitcode.com/gh_mirrors/el/electron-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考