<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/0ba794.md for this page in Markdown format</div>

*node.js*: 听过*Electron*的都知道他使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序, 在现在的以单页面应用程序为主的前端环境来看, 毫无疑问需要用的*node.js*环境

Electron 有两种进程：主进程和渲染进程。

• 主进程通过创建 BrowserWindow 实例来创建 网页。 每一个 BrowserWindow 实例在其渲染过程中运行网页， 当一个 BrowserWindow 实例被销毁时，对应的渲染过程也会被终止。
• 主进程 管理 所有网页及其对应的渲染进程。

---

• 渲染进程只能管理相应的网页， 一个渲染进程的崩溃不会影响其他渲染进程。
• 渲染进程通过 IPC 与主进程通信在网在页上执行 GUI 操作。 出于安全和可能的资源泄漏考虑，直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。

---

进程之间的通信可以通过 Inter-Process Communication(IPC) 模块进行：ipcMain 和 ipcRenderer

打包

• 第一种 最简打包

npm install electron-packager -g
electron-packager .

vue + electron

• electron-vue 上次更新时间是4年前 毫无疑问再大前端这个领域是过时的了, 这里使用插件创建**Vue CLI Plugin Electron Builder** https://nklayman.github.io/vue-cli-plugin-electron-builder/

• 创建完成后就按正常vue项目开始基建

• 导入normalize.css npm i normalize.css -S

// 全局css
import "normalize.css/normalize.css"; // a modern alternative to CSS resets

• 使用element-ui框架

• • npm i element-ui -S
  • main.js 引入

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);