学习electron做桌面应用程序开发,从安装到Hellow World,过程中遇到的问题以及解决方式。
这边Electron官方文档有详细的步骤。
检查 Node.js 是否正确安装,请在您的终端输入以下命令:
(资料图片)
node -vnpm -vElectron 应用程序遵循与其他 Node.js 项目相同的结构。首先创建一个文件夹并初始化 npm 包。
mkdir my-electron-app && cd my-electron-appnpm init有几条规则需要遵循:
entry point应为 main.jsauthor与 description可为任意值,但对于应用打包是必填项你的 package.json 文件应该像这样:
{ "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Jane Doe", "license": "MIT"}然后,将 electron包安装到应用的开发依赖中。
npm install --save-dev electron好了,走到这一步开始出现问题!!!
read ECONNRESET以及electron@25.0.1 postinstall: `node install.js` 应该是表达安装失败了,开始各种百度怎么解决问题。
将electron下载地址指向taobao镜像:
npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"等同于在~/.npmrc添加:
electron_mirror="https://npm.taobao.org/mirrors/electron/"上面两种方式达到同样的效果,任选一种即可。然后删了\node_modules\electron文件夹,或者删了整个\node_modules来尝试重新执行npm install --save-dev electron,这次没有报错
接着看文档,在package.json配置文件中的scripts字段下增加一条start命令:
{ "scripts": { "start": "electron ." }}在项目的根目录下创建一个名为main.js的空文件,添加代码
const { app, BrowserWindow } = require("electron")const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile("index.html")}app.whenReady().then(() => { createWindow()})创建index.html,添加代码
你好! 你好!
我们正在使用 Node.js , Chromium , 和 Electron . 执行start
npm start又出错了!!!
它意思应该是让我重新安装,于是又开始百度,最终找到了解决问题的办法。对比electron的版本后发现依赖中少了dist文件夹和path.txt文件,手动创建空文件夹和空文本,dist的文件夹的内容为Electron自行选择版本解压后的内容,path.txt中添加文本electron.exe。
到此,重新在终端中执行npm start可以成功启动项目。
环境安装到此结束,其中也参考了大佬 涅槃快乐对npm安装electron源码的深入解读。另外,本篇如有不足之处望指出。
Copyright © 2015-2022 西南公司网版权所有 备案号:皖ICP备2022009963号-8 联系邮箱:39 60 29 14 2@qq.com