一、用npm搭建项目

npm 最好是用比较新版的，不然可能有版本问题……超级麻烦。

npm -v
8.0.0node -v
v16.11.1npm init
npm install --save-dev electron//报错内容
npm ERR! code 1
npm ERR! path D:\workspace\electron\test1\node_modules\electron
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: read ECONNRESET
npm ERR!     at ClientRequest.<anonymous> (D:\workspace\electron\test1\node_modules\got\dist\source\core\index.js:970:111)
npm ERR!     at Object.onceWrapper (node:events:510:26)
npm ERR!     at ClientRequest.emit (node:events:402:35)
npm ERR!     at ClientRequest.origin.emit (D:\workspace\electron\test1\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
npm ERR!     at TLSSocket.socketErrorListener (node:_http_client:447:9)
npm ERR!     at TLSSocket.emit (node:events:390:28)
npm ERR!     at emitErrorNT (node:internal/streams/destroy:157:8)
npm ERR!     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR!     at TLSWrap.onStreamRead (node:internal/stream_base_commons:220:20)npm ERR! A complete log of this run can be found in:
npm ERR!     D:\software\cood_tools\node_data\node_cache\_logs\2023-05-19T01_30_29_190Z-debug.log

根据这个报错内容“RequestError: read ECONNRESET”，百度结果是链接断开，大概是源的问题。

//查看本地源
npm get registry
https://registry.npmmirror.com/
//更换源
npm config set registry http://registry.npm.taobao.org/npm install --save-dev electron
added 72 packages in 8m

下载是真的慢……但是成功。

//package.json
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js","scripts": {"start": "electron .",//手动加的"test": "echo \"Error: no test specified\" && exit 1"},"author": "Jane Doe","license": "MIT","devDependencies": {"electron": "23.1.3"}
}

之后仅记录bug和最后结果。

报错

1、Cannot find module D: workspace electron'testivindexjs' please verify that thepackagejson has a valid "main" entry

按官网教程，简单写个main.js改完package.json,运行 npm run start,然后报错……

这个原因是因为我本地文件package.json没改main，默认是index.js。

根据官网index.html中http头加安全策略：内容安全策略（CSP） - HTTP | MDN

成功运行~

2、requier is not defined

这个应该是依赖找不到,因为require打错了……

3、调试

一开始我没不太懂怎么调试，然后仔细看了下编译好的界面下的选项。

快捷键 ctrl+shift+i，这个之后可以代码设置。

包括start 命令中都能放参数，这些之后再说。

giee:https://gitee.com/lsswear/wj_test/tree/master/electron/test1

官网自带的样例项目/(ㄒoㄒ)/~~ npm install 半天没反应 pass掉……

二、用Electron脚手架

简单用了下相当好使。

npm install --save-dev @electron-forge/cli//感觉最好全局安装
npm init electron-app@latest my-app//创建项目
npm init electron-app@latest my-app -- --template=webpack//带模板创建
npm run start //运行
npm run make//编译到out文件夹 编译出exe执行文件和可安装文件
npm run publish//编译出可发布的文件 应该是可安装文件

在里面加个vue2试试~查了下 vue2 不能像其他以来直接install，但是有个Electron-vue，可以试试。

这个脚手架出来都是一样，不做例子，目前也没啥错。

三、用HBuilder

新星计划 Electron+vue2 桌面应用 2 搭建及运行相关推荐

[新星计划] Python环境搭建 | 万丈高楼平地起
[新星计划] Python环境搭建 | 万丈高楼平地起 ● Python解释器安装 ○ Windows平台 ○ Linux平台 ● pip工具设置 ○ 方法 1 ○ 方法 2 ○ Windows平 ...
electron sqlite3_Electron+React+Antd工程搭建
Electron桌面应用构建指南技术栈 react react-router-dom electron ant design 搭建过程添加镜像源根目录添加 .yarnrc文件 registry ...
ZEGO教程：如何通过electron构建桌面跨平台音视频应用
近年来,视频直播.短视频.在线教育.在线医疗.人工智能.以及VR等视频领域的相关行业都非常热门,成为大众瞩目的焦点.而5G网络的相继普及,移动网速飞速提升,又将引起下一轮视频应用的革命. 可以看到,在 ...
新星计划2023: SSM旅游网站项目实战
加精前排提醒:这里是新星计划2023[SSM旅游网站项目实战]学习方向的报名入口,一经报名,不可更换. ↓↓↓报名方式:(下滑到本页面底部) 一.关于本学习方向导师博客昵称:编程指南针博客主页: ...
新星计划【Java微服务+云原生】赛道开启！
前排提醒:这里是新星计划2023[微服务+云原生]学习方向的报名入口,一经报名,不可更换. ↓↓↓报名入口:新星计划2023[微服务+云原生]学习方向报名入口!-CSDN社区一.关于本学习方向导师 ...
北京智源新星计划启动，大力支持人工智能青年人才
2020年5月10日,北京智源人工智能研究院(以下简称:智源研究院)正式启动"智源新星计划",与北京大学人工智能研究院合作拟引进首位新星学者. 智源新星计划是智源研究院持续推进&q ...
使用 AngularJS 和 Electron 构建桌面应用
使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨 ...
送你一份用Electron开发桌面应用的避坑指南【送3本书，含犀牛书】
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,新年第一次送3本书.抽奖规则见文末. 如今,Electron 领域发生了重大的变革,Electro ...
新星计划·第三季【博文流量密码公开课】
一.新星计划 "新星计划"是一个以发掘潜力新人.培养优质博主为目标的创作活动,通过为期一个月的时间,让资深"导师"和新人"学员"近距离接触, ...

新星计划 Electron+vue2 桌面应用 2 搭建及运行