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/, ‘’));

• [email protected] 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