嗨，我是勾勾。今天要介紹的是 Electron 跨平臺桌面應用開發。

Electron（https://electronjs.org/）是一個運行平臺，它能夠讓我們通過 HTML + CSS + JavaScript 開發桌面應用程序。

核心原理就是 Electron 中將 Chromium（Chrome 的內核）和 Node.js 打包到了一起，通過 Chromium 提供 WebView 從而實現 UI 編程能力，通過 Node.js 提供 APIs 從而實現系統接口調用。

簡單來說就是，在 Electron 中我們可以像在 Web 開發中一樣，通過 HTML + CSS 完成 UI 開發，通過 JavaScript（ECMAScript）調用 APIs 實現業務功能，只不過這里的 APIs = Web APIs + Node APIs。

快速上手

一個最基本的 Electron 項目需要有如下的幾個必要文件：

your

與 Web 所不同的是，這里 Electron 啟動的入口是 JavaScript 文件，也就是這里的 main.js 文件（簡單示例）。

// main.js

在這個 JavaScript 文件中創建頁面窗口用于加載所需要在界面上顯示的頁面文件 index.html。更完整的 main.js 應該如下：

const

index.html 中可以是任何你想要呈現的內容。你也可以使用不同的庫和框架，這與 Web 中沒什么兩樣，所不同的是，當你 BrowserWindow → webPreferences → nodeIntegration 設置為 true 時，你可以在頁面的腳本中使用 Node APIs。這看起來非常棒，但是要小心使用這個特性，因為如果你加載的不是本地的腳本，那就存在風險。

案例：文件編輯器

為了體現 Electron 的能力，我們通過一個簡單的記事本應用案例來感受。

克隆基礎項目結構代碼：

$

安裝項目依賴的模塊：

$ yarn # or npm install

頁面結構與樣式：

<!--

頁面腳本文件 renderer.js：

// renderer.js

當然 Electron 模塊中提供了更合適的 APIs，用于提示用戶保存文件位置、讓用戶選擇打開某個文件：

const

注意事項：

在渲染進程中使用 Node APIs 需要開啟當前 BrowserWindow 的 nodeIntegration（針對 Electron 5 以上版本）。

由于渲染進程是運行在 Chromium 中的，所以不管是樣式還是腳本都不需要考慮兼容其他環境問題，你可以放心大膽的使用新特性。

通過以上的示例，我們應該就可以體會到 Electron 開發的過程，以及 Electron 的內部組成。

主進程與渲染進程

Electron 中有兩種進程類型，分別為「主進程」和「渲染進程」，它們的職責和能力各不相同：

通過 Electron 直接啟動運行的腳本，運行這個腳本的進程被稱為「主進程」。一個 Electron 應用總是有且只有一個主進程。一般我們都會在這個進程中管理整個應用，所以我個人也把它稱之為「調度進程」。

通過 BrowserWindow 創建的頁面窗口運行在單獨的進程當中，稱之為「渲染進程」。負責展示頁面以及運行頁面上所需要的腳本。

With Framework

接下來我們再來了解一下，如何配合使用 React.js 或者 Vue.js 這樣的 UI 框架開發 Electron 應用。

如果你不需要使用 JSX 或者單文件組件這些特性，你可以直接把這些框架當作庫，直接在頁面中使用。

當然，就現階段來說，大家很自然的會把這些有特性和框架捆綁，總是用 A 就必須要用 B，所以這里還是需要推薦給大家一個我覺得非常方便的集成環境。

electron-webpack

electron-webpack 其實是一個通過 webpack 編譯 Electron 代碼的集成工具，通過簡單的配置就可以支持 React.js 和 Vue.js，當然你也可以讓它支持更多。

electron-webpack：

https://github.com/electron-userland/electron-webpack?github.com

它要求你有通過特定的項目結構編寫代碼：

my

我們可通過官方提供的模板快速創建這樣結構的項目：

$

這個項目中提供了一些有用的 scripts：

#

使用 Vue.js

由于 electron-webpack 中會自動加載 Vue.js 所需的 loader，所以只需要安裝對應的模塊，Vue.js 單文件組件將自動工作。

yarn add vue electron-webpack-vue --dev

使用 React.js

同理，React.js 的工作也只需要安裝相應的模塊：

yarn add react react-dom @babel/preset-react --dev

打包和發布

我們可以使用類似 electron-builder（https://www.electron.build）的一些集成工具輕松完成跨平臺打包任務。

剛剛介紹的 electron-webpack 的初始項目模板中就包含了此工具的使用。

最近在重寫一個基于 Vue.js + TypeScript 的 Electron 骨架項目，如需自取：

https://github.com/zce/electron-boilerplate?github.com

本文轉載自公眾號：勾勾的前端世界

收獲更多前端技術， 歡迎來找勾勾交流

總結

以上是生活随笔為你收集整理的vue引用electron_如何搞定跨平台桌面开发？Electron助你快速起步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。