html5建一个网站,全球顶尖设计网站,吉林网站建设代理渠道,网站备案拍照要求玩转Electron Electron 是什么注意事项环境安装安装 vscode安装 git 第一个实例第二个实例第二个实例解读 总结问题解答 Electron 是什么
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个… 玩转Electron Electron 是什么注意事项环境安装安装 vscode安装 git 第一个实例第二个实例第二个实例解读 总结问题解答 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
终端中测试下指令运行如果有权限问题运行以下指令
Set-ExecutionPolicy Unrestricted
set-executionpolicy remotesigned #管理员打开ps并运行安装 git
安装最新版Git以及TortoiseGit
第一个实例
找个目录比如E:\盘根目录 创建一个为 electron_study的目录 进入electron_study目录 右键选择使用 vscode 打开 勾选信任 创建 main.js
console.log(Hello from Electron)新建终端在终端中 electron main.js 输出效果
PS D:\_new_20231014\_linyee\electron_study electron main.jsHello from Electronctrlc 退出运行继续后续代码测试
第二个实例
# 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
