electron的基本教程

已于 2022-10-08 11:03:58 修改
阅读量375 收藏
点赞数
分类专栏： Vite2+Vue3+Electron19项目 文章标签： electron javascript 前端
于 2022-10-05 16:46:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484007/article/details/127165559
版权
这篇博客介绍了如何使用Electron进行桌面应用开发，从安装、运行到优化、读写本地文件、主进程与渲染进程通信以及应用打包的全过程。通过修改package.json、创建index.html和main.js文件，结合nodemon优化开发流程，最后使用electron-builder完成应用打包。
摘要由CSDN通过智能技术生成

安装

mkdir my-electron-app && cd my-electron-app
npm init
npm install

{
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装electron

npm install --save-dev electron

如果安装过程出现下面这个错误：
在这里插入图片描述
解决方法

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install --save-dev electron

运行

在这里插入图片描述

修改package.json

“main”: “main.js”
“start”: “electron .”

{
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "electron": "^21.0.1"
  }
}

创建index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP
最低0.47元/天 解锁文章
不点外卖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron 中文教程
05-01
常见问题 Introduction 1.1 Electron 常见问题 1.2 向导 支持平台 2.1 分发应用 2.2 提交应用到 Mac App Store 2.3 打包应用 2.4 使用 Node 原生模块 2.5 主进程调试 2.6 使用 Selenium 和 WebDriver 2.7 使用开发人员工具扩展 2.8 使用 Pepper Flash 插件 2.9 使用 Widevine CDM 插件 2.10 教程 快速入门 3.1 桌面环境集成 3.2 在线/离线事件探测 3.3 API文档 简介 4.1 进程对象 4.2 支持的 Chrome 命令行开关 4.3 环境变量 4.4 自定义的 DOM 元素: File 对象 5.1 webview 标签 5.2 window.open 函数 5.3 在主进程内可用的模块: app 6.1 autoUpdater
electron中文教程.pdf
07-06
### Electron框架中文教程知识点整理 #### Electron概述 Electron是一个基于Node.js和Chromium构建的开源框架，用于开发跨平台的桌面应用程序。它能够让开发者使用JavaScript、HTML和CSS等web技术来创建桌面软件，...
Electron 入门教程
emperinter的博客
10-11 1471
整个教程不涉及过于深入的知识，通过一系列c操作能够运行一个简单的MarkDown编辑器。在整个过程中体会Electron的作用，对于我来说就是把整个网页和浏览器打包成一个程序了，简单说可能就是我们常说的大前端。 安装 安装npm,详情请参考官网https://nodejs.org/en/ 创建项目文件夹 mkdir Markdown 初始化 npm init 初始化后会生成一个项目描述文件package.json，内容(特别注意main何scripts选项)如下： { "nam..
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
最新发布
宝码香车的博客
07-16 3449
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron教程
bnm2442的博客
09-26 256
electron教程(一): electron的安装和项目的创建 - Silenzio - 博客园
electron入门教程
wang993828743的博客
05-27 8002
一、安装配置 1、为你的应用创建一个新的空文件夹 Electron 2、打开你的命令行工具，然后从该文件夹运行 npm init 会帮助你创建一个基本的 package.json 文件 3、安装electron npm install --save-dev electron 4、项目根目录新建main.js文件（入口文件） const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器
Electron入门教程1 —— 编写第一个桌面应用程序
热门推荐
weixin_50216991的博客
04-15 1万+
最近临时起意，想开发Windows桌面应用程序，但是我们肯定都先会想到微软的C#。但是我又不想花时间去学习C#，而且就算学了C#，还是很难快速开发出好看的Windows桌面应用。所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。首先声明，我自己也在学习Electron这个框架，所以就有了这个教程。 ...
Electron基础入门教程
10-26
**Electron基础入门教程概述** Electron是一款开源框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。这个基础入门教程针对初学者，旨在教会那些对Electron不熟悉的开发者如何从...
结合使用Python和Electron教程
04-05
在本教程中，我们将深入探讨如何利用Python的强大功能与Electron框架相结合，为你的Python应用程序构建现代化、跨平台的图形用户界面（GUI）。Electron是一个使用Node.js、Chromium和HTML/CSS/JavaScript来构建桌面...
Electron打包exe桌面应用教程
03-21
### Electron 打包 exe 桌面应用教程 在本教程中，我们将详细介绍如何通过 Electron 构建并最终打包一个简单的桌面应用至 `.exe` 安装程序的过程。本教程适用于初学者，同时也包含了进阶用户可能需要了解的细节。 ...
electron入门篇
02-27
2. **基本结构**：一个Electron应用通常包含`main.js`（主进程）和多个`renderer.js`（渲染进程）文件。主进程管理应用程序的生命周期，而渲染进程负责展示用户界面。 3. **主进程与渲染进程**：主进程是Electron...
Electron实战教程（初级）
06-30
Electron作为一个优秀的跨平台桌面开源框架，吸引了大量从事原生客户端开发和前端开发的同学涉足。Electron学习的过程存在两个门槛，一是入门，二是进阶。据以往的经验，只要你能够入门并适应Electron开发的流程，就能够很快的从事一些简单功能的开发，并且熟悉一段时间后，就能够独立完成大部分PC客户端的开发需求。到了进阶阶段，就要求我们能够熟练的运用Electron的特性完成某些具有一定难度功能的开发，不过这个需要我们大量的实践经验的积累，本课程结合本人多年从事原生客户端开发和Electron开发的经验，对Electron的使用进行介绍，帮助大家迅速入门并快速进入进阶阶段，减少不必要的弯路和踩坑。
Electron 教程_20201007
linjingtu的博客
10-09 534
​Electron 教程 Electron 教程简介 Electron 快速入门 Electron 桌面环境集成 Electron 在线/离线事件探测 Electron 进程 Electron 支持的 Chrome 命令行开关 Electron 环境变量 Electron 应用部署 Electron 向Mac App Store 应用提交向导 Electron 应用打包 Electron 使用原生模块 Electron 主进程调试 Electron 使用 Selenium 和 We
一、Electron入门教程
weixin_30696427的博客
08-03 329
参考资料：https://www.cnblogs.com/zhangshuda/p/8086500.html 一、首先安装node(具体过程百度) 二、新建文件夹demo 三、打开终端进入新建的文件夹中 4、初始化项目 npm init -f 　文件中会多出package.json文件 五、修改package.json 　　main：'index.js'修改为...
Electron教程 （一）Electron介绍
weixin_33807284的博客
01-10 1477
Electron介绍 Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。 Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个...
Electron教程1_Electron介绍
随风漂浪的博客
04-02 422
Electron介绍 Electron 是由Github开发的，用HTML , CSS 和JavaScript 来构建的跨平台桌面应用程序的一个开源库。 Electron 通过将Chromium 和Node.js 合并到同一个运行时环境中，并将其打包为Mac , Windows 和 Linux系统下的应用来实现这一目的。 网站 网站：https://www.electronjs.org/ 特点 ...
Electron入门教程一（electron的基础安装等）
hhy1006894859的博客
04-19 9628
一、前言 官方文档：https://electronjs.org/docs Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。 二、安装配置 1、新建文件夹electro...
Electron教程-Electron运行的流程
htzhanglong的专栏
11-28 311
Electron运行的流程 想看视频的同学访问： https://pan.baidu.com/s/1Dol4tP6Jop6MXro0ULVapQ 地址失效访问：https://www.itying.com/goods-929.html
electron入门
qq_27685463的博客
05-22 1355
详细文档：https://www.electronjs.org/docs/api/menuconst {label : "文件" , submenu : [ {label : "新建窗口" , } , ] , } , {label : "编辑" , submenu : [ {label : "新建窗口" , } , ] , } , ];1、点击打开新窗口label : "新建窗口" , click :() => {} , } , ];2、点击打开浏览器shell。
electron教程 小满
09-11
2. Electron 入门教程（CSDN）：CSDN 上有一篇针对初学者的 Electron 入门教程，它介绍了 Electron 的基本概念和使用方法，包括创建窗口、处理事件等。你可以在 CSDN 上搜索 "Electron 入门教程" 找到这篇文章。 3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值