Electron入门教学(electron菜鸟教程)
简介
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。说白了就是一个沙盒包了一个浏览器，从而实现桌面应用。
主进程
在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。
主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建窗口。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。
开始
搭建vite2+vue3
yarn create vite <your-vue-app-name> --template vue
cd <your-vue-app-name>
npm i
npm run dev
浏览器里可以看到页面，vite+vue就搭建好了
安装electron依赖
安装electron 这里使用镜像
根目录添加一个
.npmrc文件
加上electron_mirror=cdn.npm.taobao.org/dist/electr…
npm install electron --save-dev
npm install electron-builder --save-dev electron 打包 \
这里需要再安装两个库
concurrently：阻塞运行多个命令，
-k参数用来清除其它已经存在或者挂掉的进程wait-on：等待资源，此处用来等待url可访问
首先来安装。
yarn add -D concurrently wait-on 复制代码
package.json
{ "name": "vue3-electron", "version": "0.0.0", "main": "electron/main.js", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview", "electron": "wait-on tcp:3000 && electron .", "electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"", "electron:build": "vite build && electron-builder" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "concurrently": "^6.4.0", "electron": "^16.0.0", "electron-builder": "^22.13.1", "typescript": "^4.4.3", "vite": "^2.6.4", "vue-tsc": "^0.3.0", "wait-on": "^6.0.0" } "build": { "appId": "com.your-website.your-app", "productName": "ElectronApp", "copyright": "Copyright © 2021 <your-name>", "mac": { "category": "public.app-category.utilities" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true }, "files": [ "dist/**/*", "electron/**/*" ], "directories": { "buildResources": "assets", "output": "dist_electron" } } } 复制代码vite.config.ts 配置
import { defineConfig } from 'vite' import { join, resolve } from "path"; import vue from '@vitejs/plugin-vue' // const root = join(__dirname, "src/render") // https://vitejs.dev/config/ export default defineConfig({ // base: resolve(__dirname, './dist/'), // 新增 base: "./", // 新增 plugins: [vue()], server: { port: 3000, proxy: {} }, }) 复制代码electron 主文件main.js
'use strict'; var path = require('path'); /** * electron 主文件 */ const { app, BrowserWindow } = require('electron'); let win; function createWin () { // 创建浏览器窗口 win = new BrowserWindow({ width: 800, height: 600, useContentSize: true, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegrationInWorker: true, nodeIntegration: true, contextIsolation: false, }, }); const URL = app.isPackaged ? path.join(__dirname, '../render/index.html') // vite 构建后的静态文件地址 : `http://localhost:${process.env.PORT || 3000}`; // vite 启动的服务器地址 app.isPackaged ? win?.loadFile(URL) : win?.loadURL(URL); if (!app.isPackaged) { //打开调试工具 win.webContents.openDevTools(); } } app.whenReady().then(() => { app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWin(); }); }); // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); }); /*此处为安装vue-devtools 扩展,vue3的vue-devtools需要使用vue-devtools beta版本 官方文档 http://www.electronjs.org/docs/tutorial/devtools-extension 安装之后若提示警告，可更改vue-devtools项目中的manifest.json，删除掉与报错内容有关的内容即可 */ app.on('ready', async () => { createWin(); }); 复制代码运行
直接在终端输入如下命令：
yarn electron:serve 复制代码
接着我们就可以看到我们桌面应用就出来咯！
7. 打包 直接在终端输入如下命令：
yarn electron:build
作者：前端木木
链接：https://juejin.cn/post/7031481278247469063