Electron+Vue搭建跨平台桌面应用Hello World

介绍

Electron是一个基于Chromium和 Node.js的跨平台的桌面应用开发框架，可以让我们用html css js的技术开发跨平台桌面应用软件，也是当下最流行的跨平台桌面应用框架。

环境搭建

在创建Electron跨平台应用之前，我们需要先安装一些常用的工具，如Node、vue和Electron等。

1.安装Node.js

进入Node官网下载页http://nodejs.cn/download/，然后下载对应的版本即可，下载时建议下载稳定版本，然后双击安装程序根据提示安装即可。

2.安装/升级vue-cli脚手架

a.先执行：vue -V，确认下本地安装的vue-cli版本

b.如果没有安装或者不是最新版，可以执行: npm install @vue/cli -g 安装/升级

3.安装Electron

使用如下命令安装Electron插件

      npm install -g electron
       或者
      cnpm install -g electron

为了验证是否安装成功，可以使用如下的命令。

      electron --version

4.创建运行项目

Electron官方提高了一个简单的项目，可以执行以下命令将项目克隆到本地。

      git clone https://github.com/electron/electron-quick-start

然后在项目中执行如下命令即可启动项目。

cd electron-quick-start
npm install 
npm start

启动后项目的效果如下图:

除此之外，我们可以使用vue-cli脚手架工具来创建项目

vue init simulatedgreg/electron-vue

然后根据下面的提示一步步选中选项即可创建项目，如下所示:

然后，使用npm install命令安装项目所需要的依赖包，安装完成之后，可以使用npm run dev或npm run build命令运行electron-vue模版应用程序，运行效果如下图所示 :

工程结构

我们主要的开发的代码在src下，分为主进程、渲染进程，main下操作的是主进程，renderer下操作的是渲染进程。

特别声明：
1、如无特殊说明，内容均为本站原创发布，转载请注明出处；
2、部分转载文章已注明出处，转载目的为学习和交流，如有侵犯，请联系客服删除；
3、编辑非《源码码网》的文章均由用户编辑发布，不代表本站立场，如涉及侵犯，请联系删除；

全部评论(0)

推荐阅读

工程项目一体化自动管理软件解决方案
1.项目概述1.1项目背景在工程建设行业数字化转型浪潮下，传统项目管理面临信息孤岛、协同困难、进度不可控、成本超支等痛点。本方案旨在构建一个覆盖工程项目全生命周期、全参与方、全业务流程的一体化智能管理平台。1.2解决方案愿景打造数据驱动、智能协同、风险预警、自动执行的工程大脑，实现：管理流程自动化率≥80%项目协同效率提升40%成本偏差率降低至±3%以内安全事故发生率降低60%1.3目标用户矩阵┌───────────────┬
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:26
阅读：167

车辆管理系统需求文档与技术架构PC端+小程序
第一部分：需求文档1.项目概述1.1项目背景为企事业单位、车队运营商、租赁公司等提供一套完整的车辆全生命周期管理解决方案，实现车辆管理数字化、智能化。1.2项目目标建立车辆从购置到报废的全流程管理体系实现用车申请、调度、监控、结算的闭环管理通过数据分析优化车辆使用效率降低车辆运维成本20%以上1.3用户角色矩阵┌──────────────┬─────────────────────────────┬──────────────
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:11
阅读：156

智慧农业/渔业物联网系统需求文档
智慧农业/渔业物联网系统需求文档文档版本： V1.0项目目标：构建一个集环境智能监测、设备自动化控制、生长模型分析、溯源管理与远程指挥于一体的综合物联网管理平台，实现降本增效、提质增产、风险预警与品牌增值。1.系统总体概述1.1核心价值：数据驱动决策，解放人力，实现农业/渔业生产的精准化、自动化与智能化。1.2用户角色：生产员/养殖员：现场巡视、接收告警、执行设备手动控制、查看实时环境
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:04
阅读：66

程序员AI编程工具推荐
AI编程工具是当前开发者的“副驾驶”，能够极大提升开发效率。以下我将从通用型、代码专用型、垂直领域型以及开源/自部署型几个维度为您分类推荐，并附上它们的核心特点和适用场景，帮助您选择。一、通用型AI对话助手（编程是核心能力之一）这类工具本质是“更懂代码的ChatGPT”，适合处理广泛的编程问题、解释代码、生成文档等。ChatGPT(GPT-4/4o)简介：行业标杆，尤其在GPT-4版本下，代码理解和生成能力极强。优点：上下文能力强，
源码教程
来源：源码码网
编辑：源码码网
时间：2026-01-09 10:56
阅读：95

中医考证在线学习小程序系统需求文档
中医考证在线学习小程序系统需求文档文档版本： V1.0目标用户：中医执业医师、助理医师、确有专长、师承等考证学员核心价值：利用移动化、碎片化、智能化工具，提升学习效率与考试通过率。1.项目概述1.1项目目标开发一款专为中医考证学员设计的微信小程序，提供从课程学习、题库练习、考点记忆、模考冲刺到学习社区的一站式闭环学习体验。旨在帮助学员充分利用碎片时间，系统化、高效地备考。1.2用户角色学员（主要用
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 10:53
阅读：30