Electron入门教学简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌

简介

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

仓库地址 gitee.com/wangsf1/vue…