1、Electron 开发环境的安装

1、安装nodejs

node --version #查看node的版本

如果没有安装就是百度

C:\Program Files\nodejs\ 
改为：
D:\SOFTWARE\nodejs\

 

NODE_HOME=D:\SOFTWARE\nodejs
NODE_PATH=D:\SOFTWARE\nodejs\node_modules\npm\bin

CNPM_PATH=D:\SOFTWARE\nodejs\node_global\node_modules\cnpm\bin

 

%NODE_HOME%
%NODE_HOME%\node_global
%NODE_PATH%
%CNPM_PATH%

 

npm config ls   #查看node安装及配置路径

显示如下：

C:\Users\xrl>npm config ls
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"

; userconfig C:\Users\xrl\.npmrc
cache = "D:\\SoftWare\\nodejs\\node_cache"
prefix = "D:\\SoftWare\\nodejs\\node_global"

; builtin config undefined

; node bin location = D:\SoftWare\nodejs\node.exe
; cwd = C:\Users\xrl
; HOME = C:\Users\xrl
; "npm config ls -l" to show all defaults.

为了保留C盘的剩余空间，有必要，把 npm的 global 路径修改到其他盘符下

npm config set cache "D:\SoftWare\nodejs\node_cache"
npm config set prefix "D:\SoftWare\nodejs\node_global"

为了下载速度：npm config set registry https://registry.npm.taobao.org

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org #安装cnpm

 注意：安装后把cnpm文件夹设置环境变量

vscode 报错

PS D:\WorkGitHub\ElectronDemo\99EelectronVue\mycodegenerator> cnpm -v
cnpm : 无法加载文件 D:\SOFTWARE\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm -v
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS D:\WorkGitHub\ElectronDemo\99EelectronVue\mycodegenerator> set-ExecutionPolicy RemoteSigned

 3、安装Electron

npm install electron -g #安装  或 cnpm install electron -g #如果没有安装 cnpm须安装一下

electron -v #查看electron版本，查看是否安装
npm update electron -g #更新electron版本

注意，如果报错：Electron failed to install correctly, please delete node_modules/electron and try installing again

解决方法：

npm update electron -g #更新electron版本

 

安装成功能如下：

C:\WINDOWS\system32>electron -v

C:\WINDOWS\system32>"node"  "D:\SoftWare\nodejs\node_global\\node_modules\electron\cli.js" -v

v11.3.0

通过直接运行：electron 应该能出现一个界面说明对了

 

御载：

npm uninstall electron #御载

 

问题1：

没有试过记录一下：https://www.kanzhun.com/jiaocheng/387797.html

error Command "electron-serve" not found. Did you mean "electron:serve"?

npm install electron-serve -g

 

问题2：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

 解决方法：如果使用了vue，则安装vue，注意管理员身份的命令行：

npm install --global vue-cli

 

问题3：

Electron failed to install correctly, please delete node_modules/electron an

 引用：https://blog.csdn.net/lf_morning/article/details/117692674

 解决方法：

1、删除 node_modules/electron（这一次是真的要删一下，否则下面的方法会报错）

1、删除 node_modules/electron

2、设置系统环境变量（设置 electron 使用淘宝源）

// windows 请在环境变量里面设置，mac 请在环境变量文件中设置
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

// 最后的/, 很重要
3、安装

npm install electron

 

问题4：electron-vue  始终运行不成功，一直卡着不动。

  App running at:
  - Local:   http://localhost:8080/    
  - Network: http://192.168.1.198:8080/
#运行过程没有报错但运行上这儿下面的日志就不输出了，
#所以看了下正确机子，下面是有日志显示的，
#所以猜想是 “yarm” 未安装导致。果然是这个原因

  Note that the development build is not optimized.
  To create a production build, run yarn build.

解决方法：安装yarn

npm install -g yarn

 

下一篇:2、Electron Hello Word!

node