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.定义与本质原生小程序：定义：直接使用微信官方提供的开发工具、语法和API进行开发。语言：使用微信自己定义的一套技术栈（WXML（微信标记语言）做结构、WXSS（微信样式表）做样式、JS
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-03-06 11:54
阅读：177

深度解读：一颗“感知”气息的MEMS传感器，如何定义雾化设备的交互未来？
消费电子与物联网设备智能化普及，人与机器之间的交互方式早已不再局限于按键的“咔哒”声。从智能手机的触控滑动，到智能音箱的语音唤醒，交互正朝着更自然、更无感的方向演进。而在电子雾化设备（如雾化器、电子烟）这一细分领域，一种看似微小却至关重要的交互变革正在发生：如何精准、可靠地识别用户的“吸气”动作？答案，藏在了一颗不足3毫米见方的微型芯片里——MEMS气流压力开关传感器。我们不谈晦涩的术语，而是以一颗具体的产品——MS2202AA-M05
源码教程
来源：源码码网
编辑：源码码网
时间：2026-03-06 11:41
阅读：32

基于NetCore（Razor Page）开发的Cms建站系统MIT协议
FytSoaCms一款基于NetCore2.2/3.1（RazorPage）功能强大的Cms建站系统，支持前后端分离。简介:模块化：全新的架构和模块化的开发机制，便于灵活扩展和二次开发。模型/栏目/分类信息体系：通过栏目和模型绑定，以及不同的模型类型，不同栏目可以实现差异化的功能，轻松实现诸如资讯、下载、讨论和图片等功能。通过分类信息和栏目绑定，可以自动建立索引表，轻松实现复杂的信息检索。FytSoa是一套基于NetCore+SqlS
开发工具
来源：gitee
编辑：源码码网
时间：2026-01-24 22:21
阅读：275

基于JAVA开发的企业级平台微信公众号管理系统SmartWx
SmartWx微信公众号管理系统是一个完整的微信公众号web操作版，直接编译即可运行。让用户不再用关心微信的底层接口，直接使用页面进行操作，简单方便。包括服务器绑定、文本管理、图文管理、菜单管理、粉丝管理、群发消息等。技术框架开发语言：JAVA数据库：MYSQLJAVA开发框架：SpringMVC+Spring+Mybatis缓存框架：j2cache前端开发框架：Layui+JQuery+html前台模板引擎：art-templat
源码教程
来源：gitee
编辑：源码码网
时间：2026-01-24 21:53
阅读：271

前后端分离的Java快速开发平台renren-security可免费商用
renren-security是一个轻量级的，前后端分离的Java快速开发平台，能快速开发项目并交付【接私活利器】采用SpringBoot3.x、Shiro、MyBatis-Plus、Vue3、TypeScript、ElementPlus、VueRouter、Pinia、Axios、Vite框架，开发的一套权限系统，极低门槛，拿来即用。设计之初，就非常注重安全性，为企业系统保驾护航，让一切都变得如此简单。提供了代码生成器，只
源码教程
来源：gitee
编辑：源码码网
时间：2026-01-23 13:03
阅读：173