Electron

**[electron 官網(wǎng)地址]：**https://www.electronjs.org/

[electron github地址]：https://github.com/electron/electron-quick-start/tree/master

作用

Electron 是一個跨平臺的、基于 Web 前端技術(shù)的桌面 GUI 應(yīng)用程序開發(fā)框架。

使用 Web 前端技術(shù)來開發(fā)一個桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 來繪制界面和控制布局，使用 JavaScript 來控制用戶行為和業(yè)務(wù)邏輯，使用 Node.js 來通信、處理音頻視頻等，幾乎所有的 Web 前端技術(shù)和框架（jQuery、Vue、React、Angular 等）都可以應(yīng)用到桌面 GUI 開發(fā)中。

獲取計算機(jī)相關(guān)的信息：例如獲取計算機(jī)電源狀態(tài)，創(chuàng)建托盤應(yīng)用，支持創(chuàng)建菜單和菜單項，獲取程序崩潰的系統(tǒng)信息等。

Hello world!

git clone https://github.com/electron/electron-quick-start.gitnpm config set electron_mirror https://npm.taobao.org/mirrors/electron/git config --global http.sslVerify "false"npm installnpm install -g electronnpm start

文檔搜索：ctrl+f

刷新：ctrl+r

與vue-cli結(jié)合

electron-vue文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

?安裝vue腳手架

npm install -g vue-cli

?創(chuàng)建工程

vue init simulatedgreg/electron-vue electron-vue-start

?進(jìn)入工程安裝依賴

cd electron-vue-start

yarn 或者 npm install（官方推薦用yarn，我也推薦用yarn，之前使用nom的時候報了很多錯誤，后來用yarn的時候相比來說順利一點(diǎn)）

?啟動開發(fā)模式

yarn dev 或者npm run dev

打包

yarn run build或者npm run build

建議總結(jié)：

官方推薦使用yarn的原因：

一，它可以更好地處理依賴關(guān)系。
二，可以使用 yarn clean 幫助減少最后構(gòu)建文件的大小。

錯誤處理：

• 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構(gòu)建的，這是一個官方的bug。此處需要注意的是，你要么更改上面兩個task，要么更改下面兩個task，因為變量聲明之后是需要使用的。我們仔細(xì)看代碼，發(fā)現(xiàn)這一段代碼并沒有實際應(yīng)用到我們的項目中，果斷注釋掉

  修改后結(jié)果如下：

  [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-uXGHnd40-1644210657025)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211109102611591.png)]

  [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ogP7SI5W-1644210657027)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211109102621640.png)]

• 出現(xiàn)錯誤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

總結(jié)

以上是生活随笔為你收集整理的Electron入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。