Electron 入门 - Electron的进程介绍及创建项目的三种方式

最新推荐文章于 2024-04-23 13:55:08 发布
最新推荐文章于 2024-04-23 13:55:08 发布
阅读量756 收藏
点赞数
分类专栏： Electron 文章标签： electron 进程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41815639/article/details/103440479
版权

Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

特点：

  • 上手简单：只要会前端的知识就可以做桌面应用
  • 跨平台：Mac，Linux，Windows
  • 自动更新

创建项目

全局安装 electron

npm install -g electron  
// 推荐使用 cnpm 进行安装 
cnpm install -g electron

创建项目的三种方式

通过 git 克隆项目
  1. 克隆这仓库
git clone https://github.com/electron/electron-quick-start
  1. 进入仓库
cd electron-quick-start
  1. 安装依赖库
npm install
  1. 运行应用
npm start
通过 electron-forge 创建项目

electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行和打包 electron 项目。

  1. 全局安装 electron-forge
npm install -g electron-forge
  1. 创建项目
electron-forge init my-app
  1. 进入项目文件
cd my-app
  1. 运行项目
npm start
最低0.47元/天 解锁文章
梁坤同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建electron应用
Jq的博客
08-02 565
安装Electron cnpm install electron --save-dev 修改package.json，增加start命令指向electron，设定入口为main.js，参照下面代码: "main": "main.js", "scripts": { "start": "electron ." } 创建最简Electron项目 创建main.js文件，添加下面的代码。 创建...
创建Electron项目
01-10 639
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": {
全网最全搭建Electron项目的各种方式及错误解决
最新发布
u011296285的博客
04-23 1580
如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。
Electron项目的创建及编译启动
m0_52364694的博客
09-04 2018
目录 1 创建项目 1.1 使用cnpm加速下载 1.2 为什么不使用SimulatedGREG/electron-vue 1.3 安装/升级vue-cli3 1.4 创建vue项目 1.5 自动安装electron 1.6 手动安装electron 1.7 编译并启动APP 2 配置项目 2.1 配置ESLint代码格式检查工具 2.2 配置vue 3 项目基本设定 3.1 主进程和渲染进程简介 3.2 APP窗口大小 3.3 取消跨域限制 3.4 取消菜单栏 3.5 设置APP窗口图标 3.6 设置AP
electron保持单一进程
lss0555的博客
08-25 651
配置文件background.js const gotTheLock = app.requestSingleInstanceLock() if (!gotTheLock) { //如果一个应用二次打开，那么getTheLock为fals app.quit() } else { app.on('second-instance', (event, commandLine, workingDirectory) => { //commandLine：传递的参数 workingDirecto
Electron 安装和创建项目
程序员小站
08-16 439
安装 nodejs 核心库 npm install -g electron-prebuilt 打包 npm install -g electron-packager 创建项目 npm init 运行 npm start 打包 electron-packager . first –win –out ../firstApp –arch=x64 –app-version=0.0.1 –electron...
electron-quick-start.rar
07-29
这个"electron-quick-start.rar"文件是一个入门级别的项目，旨在帮助新手快速上手 Electron 开发。通过这个压缩包，你可以学习到如何构建一个简单的 "Hello world" 应用，而不必先安装 Git。 首先，"Hello world" ...
electron-quick-start-master.rar
07-16
Electron是构建跨平台桌面应用程序的一种流行框架，它允许开发者使用Web技术（如HTML、CSS和JavaScript）来创建桌面应用。`electron-quick-start-master`是一个基础的Electron应用示例，通常用于新手入门，帮助...
electron入门.pptx
02-17
Electron 入门指南 Electron 是一个由 Github 开发的开源框架，允许开发者使用 Web 技术构建跨平台的桌面应用。它利用 Chromium 浏览器提供强大的 UI 能力，让开发者可以不考虑兼容性的情况下，利用强大的 Web 生态...
electron-music:Electron开发的音乐播放器项目
05-25
将此应用程序与应用程序结合使用以获取API代码示例，以帮助您入门。 基本的Electron应用程序仅需要以下文件： package.json指向应用程序的主文件，并列出其详细信息和依赖项。 main.js启动应用程序并创建一个...
Electron基础入门教程
10-26
总的来说，这个教程为新手提供了一个全面的Electron入门路径，无论你是Web开发者还是对桌面应用开发感兴趣，都能从中获得宝贵的知识和实践经验。通过实践这些视频教程和配套材料，你将能够自信地构建自己的Electron...
electron 入门 第一篇 搭建electron项目
倔强的钢蛋
03-17 921
electron 入门指南
Electron项目创建的三种方法
越陌度阡
04-14 7153
1. 克隆仓库，快速启动 1. 克隆项目 git clone https://github.com/electron/electron-quick-start 2. 进入这个项目下 cd electron-quick-start 3. 安装依赖 npm install 4. 运行项目 npm start 打开快速启动的项目，主要有以下几个文件： (1). index.html ，渲染进程； (2). render.js，渲染进程，在index.html中引用； (3). ma
electron中使用node的子进程创建本地的web server
热门推荐
zoepriselife316的博客
08-12 1万+
刚开始，是要在别的框架中使用node，创建本地服务器 首先要有个server.js const http = require('http'); //const hostname = '127.0.0.1'; //可以不写，或者写localhost const port = 7888; // 通过 createServer 创建 web服务器 const server = http.creat...
Electron入门教程2 ——进程模型
weixin_50216991的博客
04-17 2303
欢迎来到Electron的第二期入门教程，上一期我们从零开始编写并发布了第一个简单的windows桌面应用程序，对electron的项目结构等也有了基本了解。这一期开始，会继续深入地学习Electron的其他知识点，这一节概念性的东西会比较多，虽然后面也有实操的点,但重在理解。上一节写preload.js的时候，就提到过进程相关的概念，但是并没有详细地去学习。Electron继承了Chromium的多进程架构，这使得该框架架构与现代web浏览器非常相似。 ✧ 为什么不是单个进程? Web浏览器是非常复杂.
Electron入门（新建工程）
一个头发贼多的小火鸡
07-21 419
前言： 因为工作需要使用Electron做桌面应用程序，了解一下学习成本最低的只有Electron。直接结合Node.js + Vue.js 可以快速实现使用，当然了解的并不深入。这里做一下记录。 顺便吐槽一下遇到一个问题，就是Electron打包后会出现部分Node.js的node_modules库找不到，当然了也找到了解决方式。 Electron文档：https://www.electronjs.org/ Electron-builder文档：https://www.electron.build
【elctron系列】electron进程（一）
沛沛呀、
11-09 237
electron初始项目搭建案例github
(三)win32通过CreateProcess开启electron进程
I feel lost
11-23 772
--------------------------------------DAY 3-------------------------------------------------------------- Q:发现之前的win32新建一个electron进程时会自动开启一个cmd——————这自然是不必要的 A:注意到ShellExcute函数的最后一个参数，将其改为SW_HIDE,
如何使用electron-builder及electron-updater给项目配置自动更新
09-02
使用electron-builder和electron-updater给项目配置自动更新可以分为以下几个步骤： 1. 安装所需依赖： - 在项目根目录下运行以下命令安装electron-builder和electron-updater： ```shell npm install electron-builder electron-updater --save-dev ``` 2. 配置electron-builder： - 在项目根目录下创建一个名为`electron-builder.json`的文件，用于配置构建选项。以下是一个示例配置文件： ```json { "appId": "com.example.app", "productName": "MyApp", "linux": { "target": "deb" }, "mac": { "target": "dmg", "category": "public.app-category.developer-tools" }, "win": { "target": [ { "target": "nsis", "arch": [ "x64", "ia32" ] } ] }, "directories": { "output": "build" }, "publish": { "provider": "github", "owner": "your-github-username", "repo": "your-github-repo", "private": true } } ``` 上述示例配置文件中，`appId`是应用程序的ID，`productName`是应用程序的名称，`linux`、`mac`、`win`分别表示不同平台的构建选项，`directories.output`指定构建输出目录，`publish`配置用于自动更新的发布选项。 3. 配置自动更新： - 在主进程代码中，按照以下步骤进行配置： ```javascript const { app, autoUpdater } = require('electron'); const log = require('electron-log'); autoUpdater.logger = log; autoUpdater.logger.transports.file.level = 'info'; autoUpdater.setFeedURL({ provider: 'github', owner: 'your-github-username', repo: 'your-github-repo', private: true }); autoUpdater.on('update-available', () => { // 处理更新可用事件 }); autoUpdater.on('update-downloaded', () => { // 处理更新下载完成事件 autoUpdater.quitAndInstall(); }); app.on('ready', () => { if (process.env.NODE_ENV === 'production') { autoUpdater.checkForUpdates(); } }); ``` 上述代码中，`autoUpdater.setFeedURL`用于设置自动更新的URL，`autoUpdater.on('update-available')`用于处理更新可用事件，`autoUpdater.on('update-downloaded')`用于处理更新下载完成事件，`autoUpdater.checkForUpdates()`用于检查更新。 4. 构建和发布应用： - 在项目根目录下运行以下命令构建应用： ```shell npx electron-builder ``` - 构建完成后，可以将应用程序的安装包发布到GitHub等平台上。 以上就是使用electron-builder和electron-updater给项目配置自动更新的步骤。请根据自己的实际情况进行配置和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值