从零搭建Electron开发环境(无Vue无React)

1.安装node.js
前往官网下载并安装工具,自定义安装路径(D:\Program Files\nodejs)

# 安装完毕在命令行输入以下命令测试是否安装成功,正确会出现版本号

npm v

2.改变原有的环境变量

(1)我们要先配置npm的全局模块的存放路径以及cache的路径

#例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立”node_global”及”node_cache”两个文件夹
#输入以下命令改变npm配置
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”
npm config get prefix #获取全局安装的默认目录

(2)在系统环境变量添加系统变量NODE_PATH,将”D:\Program Files\nodejs\node_global”设为系统环境变量PATH

# 输入路径D:\Program Files\nodejs\node_global\node_modules,此后所安装的模块都会安装到改路径下

基本命令

npm init #初始化
npm install express #本地安装
npm install exoress -g #全局安装
npm update express #更新模块
npm uninstall express #本地卸载
npm uninstall express -g #全局卸载
npm cache clean –force #清除缓存
npm install -g npm #更新npm
npm install -g npm@8.3.0 #安装npm指定版本
npm root -g #查看全局安装包的存放位置
npm ls -g #查看全局安装的包
npm info npm #查看npm的信息
npm config set registry https://registry.npm.taobao.org #设置淘宝镜像站
npm config get registry #获取npm下载地址
npm config set registry https://registry.npmjs.org #还原npm仓库
npm audit fix #包的修复 ,一般是包的更新
npm config list #查看基本配置

安装到依赖

npm i 包名 save #–save为默认选项,意思为添加到package.json的dependencies里面

安装到开发依赖

#开发依赖指项目的开发过程中需要使用的包,像less编译为css、语法检查模块等

npm i 包名 savedev #–save-dev意思为添加到package.json中的devDependencies里面

安装淘宝npm(cnpm)

npm install -g cnpm –registry=https://registry.npmmirror.com
cnpm -v #查看安装版本
#注:如果报错,添加系统变量path的内容
#因为cnpm会被安装到D:\Program Files\nodejs\node_global下,而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm

设置淘宝源:

npm config set registry http://registry.npmmirror.com

npm config get registry

npm config set registry https://registry.npmjs.org

 

cnpm install -g electron
cnpm install -g electron-forge
electron-forge init notepad
electron-forge start
npm start
npm run make
<span class="pln"> </span>
<span class="pln">cnpm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev webpack webpack</span><span class="pun">-</span><span class="pln">cli webpack</span><span class="pun">-</span><span class="pln">merge webpack</span><span class="pun">-</span><span class="pln">node</span><span class="pun">-</span><span class="pln">externals</span>
<span class="pln">cnpm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev typescript</span>
<span class="pln">cnpm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">node </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">webpack</span>
<span class="pln">cnpm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev css</span><span class="pun">-</span><span class="pln">loader file</span><span class="pun">-</span><span class="pln">loader node</span><span class="pun">-</span><span class="pln">loader style</span><span class="pun">-</span><span class="pln">loader ts</span><span class="pun">-</span><span class="pln">loader</span>
<span class="pln">cnpm install </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev html</span><span class="pun">-</span><span class="pln">webpack</span><span class="pun">-</span><span class="pln">plugin</span>

参考:

https://blog.csdn.net/m0_68683769/article/details/123770203

https://blog.csdn.net/lakersssss24/article/details/125661707

https://developer.aliyun.com/mirror/

http://www.npmmirror.com/

https://zhuanlan.zhihu.com/p/601918587

https://myblog.blog.csdn.net/article/details/121873229

https://blog.51cto.com/lancelot/2313205

https://www.wkwkk.com/articles/4df8909f3ac4e5c0.html

https://zhuanlan.zhihu.com/p/565103871

原文链接:https://www.hertzdance.com/blog/electron-vue-react,转载请注明出处。

0

评论0

请先
欢迎光临频率跳动资源网
显示验证码
没有账号?注册  忘记密码?