electron基础+快速上手创建electron项目

最新推荐文章于 2025-05-31 17:50:10 发布
最新推荐文章于 2025-05-31 17:50:10 发布
阅读量1.1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Electron 文章标签： electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/third_/article/details/121718132
本文介绍了Electron的基础知识，包括其用途和选择它的原因。接着通过5分钟快速上手教程，展示了如何创建一个基本的Electron项目，包括初始化、安装、配置文件修改以及加载HTML内容。最后，介绍了如何实现Electron的热加载功能，使得在开发过程中修改代码后无需重启即可看到效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

主进程和渲染进程

定义原生菜单，顶部菜单 

文件读取展示

定义快捷键 

主进程和渲染进程通讯

打包

electron结合框架开发 

一、Electron的基本介绍

1、electron是干什么的？

Electron是使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。

2、为什么选择electron？

  • Electron可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用。
  • 在PC端桌面应用开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体，而electron相对而言是更好的选择方案，它的社区相对比较活跃，Bug比较少，文档相对利索简洁。
  • Electron相对比nw.js靠谱，有一堆成功的案例：Atom编辑器，Visual Studio Code，WordPress等等 
  • Node.js的所有内置模块都在Electron中可用。 

二、5分钟快速上手 

1、新建文件夹，使用npm init命令初始化package.json文件。

一直回车，直到看到Is this OK？再次回车，就可以看到文件夹下生成了一个package.json文件。

 2、在文件夹下使用命令：cnpm intall electron -S 安装elect

最低0.47元/天 解锁文章

200万优质内容无限畅学
如何快速构建 Electron 项目
AxCybersecurity的博客
10-09 274
Electron 是一个流行的开源框架，用于构建跨平台的桌面应用程序。您可以从 Node.js 官方网站 (https://nodejs.org) 下载适用于您操作系统的安装程序，并按照指示进行安装。您可以根据自己的需求进一步扩展和定制该项目，添加更多功能和页面。这将启动 Electron 应用程序，并显示一个窗口，其中包含 “Hello, Electron!在您选择的位置创建一个新的项目目录。这是一个简单的 HTML 文件，其中包含一个标题和一个标题级别为 1 的标题。的文件作为应用程序的初始页面。
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
热门推荐
宝码香车的博客
07-16 5万+
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
electron桌面应用多种快速创建方法
qq_35496811的博客
03-19 336
结合vite和vite前端页面模版搭建electron。结合next框架搭建electron。结合nuxt框架搭建electron。
electron教程（一）创建项目
i-cat的博客
07-02 982
通过electron创建一个自己的app
快速上手Electron开发桌面应用（以Windows为例）
最新发布
2301_80138104的博客
05-31 1207
​如果你一路跟随本教程下来，你应该已经建立了一个拥有静态用户界面的功能性 Electron 程序。增加渲染进程的网页应用代码复杂度深化与操作系统和 Node.js 的集成具体实现步骤请移步Electron文档进行学习，这里不再赘述。
快速搭建electron项目
qq_44961097的博客
04-26 454
快速搭建electron项目(使用npm) 1.终端输入npx create-electron-app@latest my-app项目名是 my-app 2.等待加载完成，去项目里 cd my-app 3.启动项目 npm start 3.打包构建项目 npm run make
创建electron应用
Jq的博客
08-02 630
安装Electron cnpm install electron --save-dev 修改package.json，增加start命令指向electron，设定入口为main.js，参照下面代码: "main": "main.js", "scripts": { "start": "electron ." } 创建最简Electron项目 创建main.js文件，添加下面的代码。 创建...
创建Electron项目
01-10 751
1：执行npm init 命令，生成package.json { "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "index.js", "author": "Jane Doe", "license": "MIT", "scripts": { "start": "electron ." }, "devDependencies": {
vue2+elementui+electron项目配置
06-06
在`vue2+elementui+electron`项目配置中，首先需要确保你已经安装了Node.js和npm，因为这两个是开发的基础环境。接下来，你需要初始化一个新的Vue2项目，可以使用Vue CLI或者手动配置。如果你选择Vue CLI，可以运行`...
13章Electron+Vue3+AI+云存储-实战跨平台桌面应用
11-14
本课程《13章Electron+Vue3+AI+云存储-实战跨平台桌面应用》便是为了满足这一需求而设计的，旨在传授如何利用最新的技术栈来构建既跨平台又具备智能化特性的桌面应用。 课程内容涵盖了Electron、Vue3、人工智能（AI...
2024更新 Electron+React+七牛云实战跨平台桌面应用
01-07
随着2024年的更新，Electron+React+七牛云实战跨平台桌面应用课程已经成为开发者关注的焦点。这一课程不仅深入讲解了Electron框架的使用，还融合了React前端框架，并结合了七牛云存储服务，为学习者提供了一个完整的...
electron创建
梧桐芊羽的博客
11-30 229
electron官网： https://electronjs.org/docs/tutorial/about 关于electron Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目...
全网最全搭建Electron项目的各种方式及错误解决
u011296285的博客
04-23 7651
如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。
创建一个electron应用
热情、奔放、快乐编程！
05-15 1939
Electron 程序是通过 npm 包创建的。我们应将 Electron 依赖安装到，然后在 package.json 中设置一个脚本来运行。执行命令后，Electron 程序会运行我们在 package.json 文件的main字段设置的入口文件。这个入口文件控制着 Electron 的主进程，后者运行于 Node.js 实例，负责应用的生命周期、展示原生窗口、执行特殊操作和管理渲染进程。渲染器进程(简称渲染器) 负责展示图形内容。我们可以将渲染的网页指向 web 地址或本地 HTML 文件。
新建electron项目
wx1458084829
07-15 127
新建electron项目 1.新建文件夹： 新建文件夹并且进入 2.初始化项目 cnpm init 3.修改package.json文件 { "name": "el_hello", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", //启动配置
IDEA使用Spring Initializer快速创建Spring Boot项目(必须联网)
cui1004的博客
11-07 1168
IDEA使用Spring Initializer快速创建Spring Boot项目(必须联网) IDEA：使用 Spring Initializer快速创建项目 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目。 我们可以选择我们需要的模块，向导会联网创建Spring Boot项目。 默认生成的Spring Boot项目，主程序已经生成好了，我们只需要我们自己的逻辑。 resources文件夹中目录结构： static：保存所有的静态资源， js css image
VSCode创建 electron 项目
bigblack12321的博客
10-31 1965
VSCode创建 electron 项目vue+vite项目
【electron学习一】创建electron项目
canonwith的专栏
09-08 400
1、在使用Electron进行开发之前，您需要安装Node.js，有条件的，最好yarn也一起安装 2、创建一个文件夹并初始化 npm 包。 （1）cd到新项目所在路径， 执行mkdir my-electron-app && cd my-electron-app，该路径下就会出现一个名为“my-electron-app”的文件夹。 （2）执行npm init，按照提示填写项目的基本信息，（其中entry point应为main.js，author与description可为...
electron介绍和快速创建工程（一）
黄彪博客
02-06 1020
文章目录electron 是什么why electron开发环境安装开发第一个 electron 桌面应用克隆 https://github.com/electron/electron-quick-startelectron-forge 脚手架手动创建 electron 工程步骤描述启动流程 electron 是什么 electron由Node.js+Chromium+Native APIs构成。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值