Electron入门
Electron
**[electron 官网地址：**https://www.electronjs.org/
[electron github地址]：https://github.com/electron/electron-quick-start/tree/master
作用
Electron 基于跨平台的跨平台 Web 桌面的前端技术 GUI 应用程序开发框架。
使用 Web 开发桌面前端技术 GUI 程序有多酷，你可以用 HTML、CSS 绘制界面和控制布局 JavaScript 控制用户行为和业务逻辑 Node.js 通信、处理音视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等)可应用于桌面 GUI 开发中。
获取计算机相关信息：如获取计算机电源状态、创建托盘应用、支持创建菜单和菜单项、获取程序崩溃的系统信息等。
Hello world!
git clone https://github.com/electron/electron-quick-start.git npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ git config --global http.sslVerify "false" npm install npm install -g electron npm start 文档搜索：ctrl f
刷新：ctrl r
与vue-cli结合
electron-vue文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
?安装vue脚手架
npm install -g vue-cli
?创建工程
vue init simulatedgreg/electron-vue electron-vue-start
?依靠进入工程安装
cd electron-vue-start
yarn 或者 npm install(官方推荐yarn，我也推荐用yarn，之前使用nom报了很多错误，后来用了yarn比较顺利)
?启动开发模式
yarn dev 或者npm run dev
打包
yarn run build或者npm run build
建议总结：
官方推荐使用yarn的原因：
一、它能更好地处理依赖关系。
二、可用 yarn clean 帮助减少最终构建文件的大小。
错误处理：
-
Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electron/v15.4.0/electron-v15.4.0-win32-x64.zip
方法：
下载的路径是
https://npm.taobao.org/mirrors/electron/v8.1.1/electron-v8.1.1-win32-x64.zip
然而，淘宝镜像的路径是
https://npm.taobao.org/mirrors/electron/8.1.1/electron-v8.1.1-win32-x64.zip
相差一个字母v
我的临时解决方案是修改
项目文件夹\node_modules@electron\get\dist\cjs\artifact-utils.js
里的39行
const path = mirrorVar(‘customDir’, opts, details.version).replace(’{undefined{ version }}’, details.version.replace(/^v/, ‘’));
改为
const path = mirrorVar(‘customDir’, opts, details.version.replace(/^v/, ‘’)).replace(’{undefined{ version }}’, details.version.replace(/^v/, ‘’));
-
my-test@0.0.1 build:
node .electron-vue/build.js && electron-builder在项目build.js中 你会看到两个声明task，项目通过vue init这是官方的bug。 这里需要注意的是，么更改上述两个task，或更改以下两个task，因为变量声明后需要使用。 仔细看代码，发现这个代码并没有实际应用到我们的项目中，果断注释掉了修改后结果如下：
[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-uXGHnd40-1644210657025)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211109102611591.png)]
[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-ogP7SI5W-1644210657027)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211109102621640.png)]
-
出现错误Application entry file “dist\electron\main.js” in the “D:\electronWork\new-edu-001\build\win-unpacked\resources\app.asar” does not exist
我们需要安装multispinner
yarn add multispinner -D然后在.electron-vue/build.js 在文件中添加一句话
const Multispinner = require('multispinner')- https://blog.csdn.net/sunfellow2009/article/details/82878253
