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