当前位置: 首页 > news >正文

从零搭建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

http://www.jsqmd.com/news/540631/

相关文章:

  • Joy-Con Toolkit:你的Nintendo Switch终极个性化工具
  • Cayenne-MQTT-mbed嵌入式IoT接入库架构与实践
  • AI写代码后,为什么每次上线前都得过安全门禁?怎么才能一次过
  • 数据存储与运算-字符串定义
  • 为什么你的语音情感识别准确率卡在70%?详解SVM核函数与二叉树优化的避坑指南
  • SEO_如何通过内容优化有效提升SEO效果?(113 )
  • 从‘深度学习之美’到TensorFlow 2.9:一个MNIST手写识别项目的实战重构记
  • 20254219 2025-2026-2 《Python程序设计》实验1报告
  • 慢接口排查工具王者榜
  • 如何快速解密QMC音乐:3个简单步骤实现音频格式自由
  • 阴阳师百鬼夜行自动化:从零开始的5个实战技巧指南
  • AI视频修复与画质增强完全指南:从低清到高清的视频优化解决方案
  • 聚焦2026四孔格栅管企业分析,PVC格栅管潜力企业推荐,玻璃钢夹砂管/九孔格栅管,PVC格栅管品牌口碑推荐 - 品牌推荐师
  • 小龙虾(OpenClaw)在建筑设计领域的应用
  • Jetson Xavier AGX设备树修改避坑指南:三种更新方式详解与实战选择
  • 从开发者视角看Web安全:你的代码是如何被SQL注入、XSS和CSRF攻破的?(含Java/PHP示例)
  • 如何免费快速解锁QQ音乐加密文件:qmc-decoder完整使用指南
  • 避开这5个坑!Android蓝牙广播接收的常见错误及正确姿势
  • ubuntu容器以及静态网站生成器sculpin
  • 电工必看:正弦交流电路中的相量法实战技巧(附计算示例)
  • 将前端面试题变为实战项目:用快马AI一键生成产品过滤列表应用
  • 一条 chown 命令,直接锁死云服务器
  • OpenCore Configurator:从技术迷宫到可视化配置的艺术
  • 从memcpy到memmove:C语言内存拷贝的进阶使用指南(含性能对比测试)
  • 2026贵阳优质财税公司推荐:全域通办更省心,工商注册+代理记账专业靠谱 - 品牌智鉴榜
  • 手把手教你解决Unity视频播放问题:H264编码设置与RawImage的正确用法
  • 终极Windows Defender移除工具:高效系统优化完全指南
  • 从地面到轨道:STK光照模型在航天任务中的精准应用
  • 有哪些大模型可以在本地部署?
  • 3大场景+5个黑技巧:用Label Studio提升80%时间序列标注效率