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

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

主进程和渲染进程

定义原生菜单，顶部菜单 

文件读取展示

定义快捷键 

主进程和渲染进程通讯

打包

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、在文件夹下使用命令

最低0.47元/天 解锁文章
田小江爱分享
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建electron应用
Jq的博客
08-02 574
安装Electron cnpm install electron --save-dev 修改package.json，增加start命令指向electron，设定入口为main.js，参照下面代码: "main": "main.js", "scripts": { "start": "electron ." } 创建最简Electron项目 创建main.js文件，添加下面的代码。 创建...
快速搭建electron项目
qq_44961097的博客
04-26 389
快速搭建electron项目(使用npm) 1.终端输入npx create-electron-app@latest my-app项目名是 my-app 2.等待加载完成，去项目里 cd my-app 3.启动项目 npm start 3.打包构建项目 npm run make
electron项目搭建
最新发布
qq_55139096的博客
07-25 928
这两个"服务器"之间通过JS Bridge进行通信(即：contextBridge),在主进程的preload预加载中可以同时访问到浏览器进程的window对象和主进程的electron api。此时，我们可以经由ipcRerender(electron中从渲染进程（网页）向主进程发送同步和异步消息的api)将electron的api挂载到window对象上，以便在浏览器进程中使用)，然后在主进程中通过ipcMain(处理从渲染器进程（网页）发送的异步和同步消息。)监听即可达到进程通信的目的。
创建Electron项目
01-10 658
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创建
梧桐芊羽的博客
11-30 172
electron官网： https://electronjs.org/docs/tutorial/about 关于electron Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目...
vue2+elementui+electron项目配置
06-06
在`vue2+elementui+electron`项目配置中，首先需要确保你已经安装了Node.js和npm，因为这两个是开发的基础环境。接下来，你需要初始化一个新的Vue2项目，可以使用Vue CLI或者手动配置。如果你选择Vue CLI，可以运行`...
（nodejs桌面应用框架）electron+vue示例项目 +
05-16
5. **官网示例**：官方提供的示例项目可以帮助初学者快速理解和上手 Electron + Vue 的结合，通过实际操作加深理解。 通过这个 Electron + Vue 示例项目，开发者可以深入学习如何构建桌面应用，如何在 Electron 中...
electron-app-svelte:构建Electron + Svelte应用程序的最小模板
05-17
** Electron + Svelte 应用程序开发 ** ...通过这个模板，开发者可以快速上手，专注于构建功能，而不是设置基础架构。无论是初次接触 Electron 和 Svelte 的新手，还是经验丰富的开发者，都能从中受益。
awesome-electron：使用Electron创建应用程序的有用资源
02-04
2. **示例项目**：展示了 Electron 的各种用法，可以帮助开发者快速上手。 3. **库和框架**：提供扩展功能的第三方模块，如状态管理、数据库集成等。 4. **工具**：用于构建、打包、调试 Electron 应用的实用工具。 ...
electron开发完整案例
11-15
electron开发完整案例 源码在 resources下的app中 详细使用electron的各种技术
electron教程（一）创建项目
i-cat的博客
07-02 617
通过electron创建一个自己的app
全网最全搭建Electron项目的各种方式及错误解决
u011296285的博客
04-23 2978
如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。
新建electron项目
wx1458084829
07-15 91
新建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 1097
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 1258
VSCode创建 electron 项目vue+vite项目
【electron学习一】创建electron项目
canonwith的专栏
09-08 279
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 945
文章目录electron 是什么why electron开发环境安装开发第一个 electron 桌面应用克隆 https://github.com/electron/electron-quick-startelectron-forge 脚手架手动创建 electron 工程步骤描述启动流程 electron 是什么 electron由Node.js+Chromium+Native APIs构成。...
创建Electron应用
a369966697的博客
03-29 725
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-h6hXt5s4-1711679569664)][外链图片转存中…(img-uVXXjZZu-1711679569665)]
Vue与Electron结合：项目搭建步骤详解
Vue.js 是一个轻量级且易于上手的前端框架，结合 Electron，我们可以快速构建功能丰富的桌面应用。本文将详细讲解如何搭建一个基于 Vue 的 Electron 项目。 首先，我们需要确保已安装 Node.js 环境，因为 Electron ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值