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

使用 cnpm 安装 Electron,才是正确快速的方法

news 2025/10/30 23:00:57

当然，下面是总结的几种安装 Electron 的方法，包括使用 npm 和 cnpm，以及一些常见的问题解决技巧。

### 1. 使用 npm 安装 Electron

#### 步骤 1: 初始化项目
在你的项目目录中初始化一个新的 Node.js 项目：
```bash
npm init -y
```

#### 步骤 2: 安装 Electron
将 Electron 安装为开发依赖项：
```bash
npm install electron --save-dev
```

#### 步骤 3: 验证安装
检查已安装的 Electron 版本：
```bash
npx electron -v
```

#### 步骤 4: 创建主进程文件 `main.js`
在项目根目录下创建一个 `main.js` 文件，内容如下：
```javascript
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
```

#### 步骤 5: 创建 HTML 文件 `index.html`
在项目根目录下创建一个 `index.html` 文件，内容如下：
```html
<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>
```

#### 步骤 6: 修改 `package.json`
确保 `package.json` 中的 `scripts` 部分包含启动脚本：
```json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.2.0"
  }
}
```

#### 步骤 7: 运行应用
在项目根目录下运行以下命令来启动你的 Electron 应用：
```bash
npm start
```

### 2. 使用 cnpm 安装 Electron

#### 步骤 1: 安装 cnpm
首先，安装 cnpm 以使用淘宝的 npm 镜像：
```bash
npm install -g cnpm --registry=https://registry.npmmirror.com
```

#### 步骤 2: 初始化项目
在你的项目目录中初始化一个新的 Node.js 项目：
```bash
cnpm init -y
```

#### 步骤 3: 安装 Electron
将 Electron 安装为开发依赖项：
```bash
cnpm install electron --save-dev
```

#### 步骤 4: 验证安装
检查已安装的 Electron 版本：
```bash
npx electron -v
```

#### 步骤 5: 创建主进程文件 `main.js`
在项目根目录下创建一个 `main.js` 文件，内容如下：
```javascript
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
```

#### 步骤 6: 创建 HTML 文件 `index.html`
在项目根目录下创建一个 `index.html` 文件，内容如下：
```html
<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>
```

#### 步骤 7: 修改 `package.json`
确保 `package.json` 中的 `scripts` 部分包含启动脚本：
```json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.2.0"
  }
}
```

#### 步骤 8: 运行应用
在项目根目录下运行以下命令来启动你的 Electron 应用：
```bash
cnpm run start
```

### 常见问题及解决方法

1. **网络问题**：
   - 确保你的网络连接是稳定的。
   - 尝试使用淘宝的 npm 镜像（cnpm）。

2. **缓存问题**：
   - 清理 npm 缓存：
     ```bash
     npm cache clean --force
     ```

3. **权限问题**：
   - 以管理员身份运行命令提示符或终端：
     - Windows：右键点击命令提示符图标并选择“以管理员身份运行”。
     - macOS 或 Linux：在命令前加上 `sudo`，例如：
       ```bash
       sudo npm install electron --save-dev
       ```

4. **磁盘空间不足**：
   - 确保你的磁盘有足够的空间来完成安装。

5. **详细错误信息**：
   - 获取更详细的错误信息：
     ```bash
     npm start --verbose
     ```

希望这些步骤和解决方法能帮助你成功安装和运行 Electron 应用。如果有任何问题，欢迎随时提问。

相关文章：

使用 cnpm 安装 Electron,才是正确快速的方法

当然&#xff0c;下面是总结的几种安装 Electron 的方法&#xff0c;包括使用 npm 和 cnpm&#xff0c;以及一些常见的问题解决技巧。 ### 1. 使用 npm 安装 Electron #### 步骤 1: 初始化项目 在你的项目目录中初始化一个新的 Node.js 项目&#xff1a; bash npm init -y …...

编程日记 2024/11/22 15:13:31

【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比：深度学习框架的终极指南

文章目录 PyTorch 全面解析2.1 PyTorch 的发展历程2.2 PyTorch 的核心特点2.3 PyTorch 的应用场景 TensorFlow 全面解析3.1 TensorFlow 的发展历程3.2 TensorFlow 的核心特点3.3 TensorFlow 的应用场景 Keras 全面解析4.1 Keras 的发展历程4.2 Keras 的核心特点4.3 Keras 的应用…...

编程日记 2024/11/22 15:12:27

【第八课】Rust中的函数与方法

目录 前言 函数指针 函数当作另一个函数的参数 函数当作另一个函数的返回值 闭包 方法 关联函数 总结 前言 在前面几课中&#xff0c;我们都或多或少的接触到了rust中的函数&#xff0c;rust中的函数和其他语言的并没有什么不同&#xff0c;简单的语法不在这篇文章中赘…...

编程日记 2024/11/22 15:11:26

c语言学习25二维数组

1 二维数组 1.1二维数组认识 二维数组本质是一个数组。 举例&#xff1a; int a[10][3] 数组名 a&#xff1b; 元素个数10&#xff1b; 数组元素类型&#xff1a;int [3]; 数组元素下标&#xff1a;0~9 这是一个数组&#xff0c;有十个元素&#xff0c;每个元…...

编程日记 2024/11/22 15:10:24

如何理解Lua 使用虚拟堆栈

虚拟堆栈的基本概念 Lua使用虚拟堆栈来实现Lua和C&#xff08;或其他宿主语言&#xff09;之间的交互。这个虚拟堆栈是一个数据结构&#xff0c;用于存储Lua的值&#xff0c;如数字、字符串、表、函数等。它在Lua状态机&#xff08;lua_State&#xff09;内部维护&#xff0c;为…...

编程日记 2024/11/22 15:09:18

【倍数问题——同余系】

题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e5 10, M 1e3 10; int maxx[M][4]; void consider(int r, int x) {if(x > maxx[r][1]){maxx[r][3] maxx[r][2];maxx[r][2] maxx[r][1];maxx[r][1] x;}else if(x > maxx[r][2]){maxx[…...

编程日记 2024/11/22 15:08:17

「San」监听DOM变化的方法

在 San框架 中监听组件内部字体大小并调整宽度&#xff0c;可以结合 自定义事件 或 数据绑定 来实现动态调整。San 框架没有直接的监听 DOM 尺寸变化的内置方法&#xff0c;但可以通过以下步骤实现&#xff1a; 方法一&#xff1a;使用 ResizeObserver 监听字体变化 在组件的 …...

编程日记 2024/11/22 15:07:16

如何选择服务器

如何选择服务器 选择服务器时应考虑以下几个关键因素&#xff1a; 性能需求。根据网站的预期流量和负载情况&#xff0c;选择合适的处理器、内存和存储容量。考虑网站是否需要处理大量动态内容或高分辨率媒体文件。 可扩展性。选择一个可以轻松扩展的服务器架构&#xff0c;以便…...

编程日记 2024/11/22 15:06:14

嵌入式驱动面试总结

操作系统&#xff1a; 中断的处理流程&#xff0c;中断处理需要注意些什么 软中断和硬中断区别 linux驱动用过那些锁&#xff0c;信号量&#xff0c;互斥锁 自旋锁和互斥锁的区别 二值信号量和互斥信号量有什么区别 进程锁怎么实现的&#xff0c;说一下流程&#xff1b; …...

编程日记 2024/11/22 15:05:13

Uniapp 简单配置鸿蒙

Uniapp 简单配置鸿蒙 前言下载并配置鸿蒙IDEHbuilder X 配置基本的信息生成相关证书登录官网获取证书IDE配置证书添加调试设备可能出现的问题前言 如今鸿蒙的盛起，作为多端开发的代表也是开始兼容鸿蒙应用的开发，接下来我将介绍如何在uniapp中配置鸿蒙。 注意：hbuilder X的…...

编程日记 2024/11/22 15:03:11

线程池的实现与应用

一、线程池 一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利用&#xff0c…...

编程日记 2024/11/22 15:02:10

基于Java Springboot单位考勤系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…...

编程日记 2024/11/22 15:01:08

近源渗透|HID ATTACK从0到1

前言 对于“近源渗透”这一术语&#xff0c;相信大家已经不再感到陌生。它涉及通过伪装、社会工程学等手段&#xff0c;实地侵入企业办公区域&#xff0c;利用内部潜在的攻击面——例如Wi-Fi网络、RFID门禁、暴露的有线网口、USB接口等——获取关键信息&#xff0c;并以隐蔽的…...

编程日记 2024/11/22 14:54:57

【linux】插入新硬盘如何配置：格式化、分区、自动挂载（Ubuntu）

文章目录 具体方法GPT分区表&#xff08;GUID Partition Table&#xff09;&#xff08;建议都用这种分区方法&#xff09;MBR分区表方法&#xff08;最大支持2TB分区&#xff09;&#xff08;Master Boot Record&#xff09; 附加&#xff1a;如何查看硬盘的型号另外&#xff…...

编程日记 2024/11/22 14:52:55

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-block.py

block.py ultralytics\nn\modules\block.py 目录 block.py 1.所需的库和模块 2.class DFL(nn.Module): 3.class Proto(nn.Module): 4.class HGStem(nn.Module): 5.class HGBlock(nn.Module): 6.class SPP(nn.Module): 7.class SPPF(nn.Module): 8.class C1(nn.M…...

编程日记 2024/11/22 14:51:54

代码随想录算法训练营第五十三天|Day53 图论

字符串接龙 https://www.programmercarl.com/kamacoder/0110.%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8E%A5%E9%BE%99.html 思路 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX 1000 // 假设最大字符串数 #define WORD_LENGTH 100 // 假…...

编程日记 2024/11/22 14:50:53

LeetCode：203.移除链表元素

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;203.移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.…...

编程日记 2024/11/22 14:49:51

知识见闻 - 数学: 均方根 Root Mean Square

What is Root Mean Square (RMS)? 在统计学上&#xff0c;均方根&#xff08;RMS&#xff09;是均方的平方根&#xff0c;而均方是一组数值的平方的算术平均数。均方根也称为二次均值&#xff0c;是指数为 2 的广义均值的一种特例。均方根也被定义为基于一个周期内瞬时值的平方…...

编程日记 2024/11/22 14:48:50

机器硬件调优

grub参数 ipv6.disable1 ipv6.autoconf0 intel_pstatedisable nohzoff idlepoll intel_idle.max_cstate0 processor.max_cstate0 mceignore_ce nmi_watchdog0 transparent_hugepagenever pcie_aspm.policyperformance audit0 irqaffinity0 nosoftlockup grub2-mkconfig -o /bo…...

编程日记 2024/11/22 14:46:48

如何更改手机GPS定位

你是否曾想过更改手机GPS位置以保护隐私、玩游戏或访问受地理限制的内容&#xff1f;接下来我将向你展示如何使用 MagFone Location Changer 更改手机GPS 位置&#xff01;无论是在玩Pokmon GO游戏、发布社媒贴子&#xff0c;这种方法都快速、简单且有效。 第一步&#xff1a;下…...

编程日记 2024/11/22 14:45:47

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/10/30 10:46:44

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/10/30 2:40:16

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/10/14 17:58:13

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/10/26 22:57:36

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/8/3 16:10:07

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/10/29 7:51:23

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/10/27 21:58:02

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/10/27 21:51:36