526互联

Electron入门

发布时间 2023-09-21 17:39:08作者: wangyb56

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