一、遇到的问题

问：npm install时，报错误：Failed to remove some directories。怎么办？

答：我在使用npm安装electron时总是报上面的错误，具体如下，我问遍了KIMI和通义，回答的方法都解决不了。还搜索了stackoverflow，国外的朋友也没有回答好的解决方法。经尝试，很明显不是表面报的权限问题。所以我换了思路，换一个工具安装。使用了electron官网介绍的，使用yarn工具安装，解决了这个问题。

npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\tianming.fan\\AppData\\Local\\npm-cache\\_npx\\1323dbbc85759269\\node_modules',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\tianming.fan\AppData\Local\npm-cache\_npx\1323dbbc85759269\node_modules\@electron\get'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\tianming.fan\\AppData\\Local\\npm-cache\\_npx\\1323dbbc85759269\\node_modules\\@electron\\get'
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]

解决方案

1、.npmrc文件

 首先在C盘Users，你的登录的账号名文件夹下，编辑.npmrc文件。添加镜像地址。

registry=https://registry.npmmirror.com
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

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

2、执行这两个命令

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

npm install --save-dev electron --registry https://registry.npmmirror.com/   

---

3、 创建一个Electron项目的步骤

npm initnpm install -g yarnyarn add --dev electron//先配置package.json的script
yarn startyarn add electron-builder --dev//先配置package.json的script
yarn build

二、我的关联笔记

【electron】5分钟把网页打包成可安装的exe桌面应用

IP查询

使用yarn，如何编译打包electron？

【ES6】ES6中，如何实现桥接模式？

三、Electron的package.json配置

{"name": "elec","version": "1.0.0","description": "Hello World!","main": "main.js","author": "Jane Doe","license": "MIT","scripts": {"test": "test","start": "electron .","build": "npx electron-builder --win --x64"},"devDependencies": {"electron": "^33.2.0","electron-builder": "^33.2.0"},"build": {"productName": "MyApp","directories": {"output": "out"},"win": {"icon": "./view/img/logo.ico",//logo 256*256"target": "nsis"},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,//用户可选择安装路径"installerIcon": "./view/img/logo.ico","uninstallerIcon": "./view/img/logo.ico","installerHeaderIcon": "./view/img/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的应用"}}
}

三、Electron与Vue3

Electron官网

官网教程How to create an Electron app with Vue and Electron Forge

Element Plus官网

Vue官网