Electron教程1-初学入门

玩转Electron

Electron 是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux------不需要本地开发 经验。

注意事项

Electron 更新非常快

初期开发建议使用最新的稳定版

环境安装

于2024年11月,当前节点而言,建议安装node20.18.0

安装完成后
npm i -g cnpm
cnpm i -g electron 这样会全局安装最新版的electron

安装 vscode

终端中测试下指令运行,如果有权限问题运行以下指令

powershell 复制代码
Set-ExecutionPolicy Unrestricted
set-executionpolicy remotesigned #管理员打开ps并运行

安装 git

安装最新版Git以及TortoiseGit

第一个实例

找个目录比如E:\盘根目录

创建一个为 electron_study的目录

进入electron_study目录

右键选择使用 vscode 打开

勾选信任

创建 main.js

js 复制代码
console.log('Hello from Electron')

新建终端,在终端中
electron main.js

输出效果

powershell 复制代码
PS D:\_new_20231014\_linyee\electron_study> electron main.js

Hello from Electron

ctrl+c 退出运行,继续后续代码测试

第二个实例

powershell 复制代码
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
cnpm i
# Run the app
npm start

网速慢的、克隆不下来的同学 从这里直接去下载

第二个实例解读

main.js 是入口文件,负责创建窗口并加载index.html

preload.js 是一个预加载文件,在加载index.html前会先加载这个脚本

其它文件应该一看就懂

运行效果

总结

到此你就,正确地第一个有界面的实例运行起来了。

本示例是在windows下完成,electron在mac、linux下也可以运行,大同小异。

问题解答

  • 运行出错 try installing again
    Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
    请手删除node_modules/electron并重新运行 cnpm i
相关推荐
qb11 分钟前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖13 分钟前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯14 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰15 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f16 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖16 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰20 分钟前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °24 分钟前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)27 分钟前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic43 分钟前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack