关于Electron环境配置与一些相关的错误解决

安装步骤:

1.安装NVM:

这个是nodejs的版本管理器,github上有一个nvm for windows,由于不能的nodejs的版本问题,可以自由进行切换.

下载地址:https://github.com/coreybutler/nvm-windows/releases/tag/1.1.10

安装过程无脑下一步,自行选择安装目录

2.安装好NVM之后,安装nodejs

 

 

管理员模式下 打开CMD,输入nvm list available,这里会展示出所有的nodejs的版本,LTS指的是长期支持的发行版,建议下载这个,选择要下载的

在命令行输入 nvm install 18.12.1

最后面的3个数字,就是对应的要下载的版本.

 

 

 下载完成以后,输入 nvm list 查看当前使用的版本,可以看到已经使用版本前有一个*号,如果要切换,可以使用nvm use 版本号

比如

 

 

  此时,版本就切换到了16.18.0

3.配置eclectron的中国镜像站

以淘宝镜像站为例,网上使用的都是cnpm,这里我还是使用npm,然后把镜像站配置成淘宝的

可以在搜索引擎上搜索:npm 淘宝镜像 关键字,就会出来最新的镜像站,注意,划重点.这里一次要自己去看一下,因为网上某SDN上全部都是一些互相致敬的帖子,里面的内容,作者自己估计都没有验证过是否能用.

目前的淘宝npm镜像源官网:https://npmmirror.com/

 

 

其以前的镜像地址已经失效

 

 

 

 

 

 

 已经失效的地址,还是出现在互相致敬的众大佬的帖子上,所以这里一定要自己去看.确认一下,这也是减少失败,减少挫折的关键.

下面进行镜像设置,在我的电脑--->c盘--->用户--->电脑名(根据自电脑的实际状况选择,有一些改了用户名,有一些没有改还是用的administrator)-->新建一个文件为.npmrc,没有后缀

用文本编辑,打开,如下:

registry=https://registry.npmmirror.com

保存退出.

然后,这时在cmd输入命令,检查一下nodejs,npm的版本,如下则表示环境正常,继续下一步

 

 

 4.安装yarn

这个在速度上会快一些,与npm的区别是,在npm里有一个有关大数据的模块,就叫yarn,这里我们是学习的话,可以用yarn,速度上比npm 要快,是否安装,自行决定,反正我装了,我硬盘大无所谓

安装命令:npm install -g yarn,

这里的install安装的意思,-g表示全局安装 ,安装好了之后查看一下版本,出现以下提示,表示安装成功

 

 

 5.配置electron环境,镜像源

这里还是用的淘宝的,没法子,速度快.可以用命令,也可以手动写

还是在.npmrc这个文件里的加上

ELECTOR_MIRROR=https://npmmirror.com/mirrors/electron/

也可以使用cmd命令,如下

npm config set ELECTOR_MIRROR=https://npmmirror.com/mirrors/electron/

然后回车,查看一下.npmrc里现是否已经存在镜像源

 

 

 此时表示镜像源都配置成功.

下面安装electron环境,也可以看下其官网的教程,网址:https://www.electronjs.org

安装electron的环境,执行cmd命令:npm install electron --save-dev

6.安装git for windows 这一步,好多教程里没有讲到,也是我自己尝试之后总结的

下载网址:https://gitforwindows.org/

基本上也是一路下一步,都选择默认.这一步是为了使用gitclone一些项目

7.下载测试项目

electron-quick-start

首先,选择一个目录,新键一个文件夹,名字不能为中文,比如我在D盘新键了一个文件夹,名为:GitHub,然后CMD切换到这个路径下,或者反开文件夹,在地址栏内输入cmd

在命令行上执行git clone https://github.com/electron/electron-quick-start,如果拉取项目比较慢,可以把github的源也配置一下

 

 

 网址为:gitclone.com

在cmd执行命令git config --global url."https://gitclone.com/".insteadOf https://

成功后执行git clone https://github.com/electron/electron-quick-start

 

 

 此时,项目已经拉取到了本地

 

 

cmd 中切换路径到刚才拉取的项目路径下, 然后在cmd里输入命令,安装环境 yarnp

 

 

 这样就表示,环境安装成功,下面执行npm start或者yarn start

可以看到运行效果

 

 

 下面来说一下错误解决

 

 

 出现以上错误,或者是说,你使用了yarn在electron这里卡住卡了很久都无法安装环境,这个时怎么怎么办?可以进行强制安装

上面的报错有这么一句提示 https://yarnpkg.com/en/docs/cli/install for documentation about this command.

进入这个网址,可以看到里面有yarn的安装命令,我们使用强制安装

 

 在cmd命令中输入 yarn install --force

这时就提示安装成功

 

 这个错误,我在网上搜了,几乎没有找到相关的答案,也可以是我找得不对.但是经过了一系列的尝试,终于成功了.

写贴不易,觉得有用的朋友,可以评论一下,给点个赞,谢谢