electron介绍和使用

目录

electron介绍

electron使用

---

electron介绍

介绍

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 ——不需要本地开发经验。

产生背景

 Atom Shell是为GitHub Atom编辑器打造的基础框架，该编辑器于2014年4月公开发布beta版。 它是基于当时一些以网页为基础的桌面端框架 (node-webkit and Chromium Embedded Framework) 从头开始构建的替代方案。 它有一个功能：嵌入Node.js和Chromium，为网页 技术提供一个桌面运行时。随着Atom Shell的功能和知名度开始大幅增长。 更多组织和个人开发者都已开始使用它构建应用程序。(一些早期采用者包括 Slack, GitKraken 和 WebTorrent)，该项目被恰当地重命名为Electron。electron使用 

运行环境

在使用Electron进行开发之前，需要安装Node.js

electron使用

electron+vite+vue3技术栈

npm create vite electron_demo

目录

下一步就在项目中引入 electron(在安装 electron之前需要先配置一下 安装源)

在根目录下新建一个 .npmrc文件

strict-ssl=false

electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ 

strict-ssl=false：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题

registry=https://registry.npmmirror.com/：这是指定了 npm 的镜像源，用于下载 npm 包

electron_mirror=https://registry.npmmirror.com/-/binary/electron/：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件

安装electron相关插件

安装electron

npm install -D electron

安装electron-builder 用于打包

npm install -D electron-builder

安装electron-devtools-installer 用于开发调试electron

npm install -D electron-devtools-installer

用vite构建electron应用程序需要一个vite插件

npm install -D vite-plugin-electron

package.json

 "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "electron": "^30.0.9",
    "electron-builder": "^24.13.3",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vite-plugin-electron": "^0.28.7",
    "vue-tsc": "^1.8.22"
  }

创建electron项目文件

新建一个src-electron 文件用来写electron的代码，在它下面创建一个 main.js文件写配置

main.js代码

const { app, BrowserWindow } = require('electron')
const { join } = require('path')

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    })

    // win.loadURL('http://127.0.0.1:8888')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

配置插件入口

在vite.config.ts中配置vite-plugin-electron 插件入口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: './src-electron/main.js'
        })
    ],
})

配置package.json

把"type": "module", 删除掉并且配置main字段

"main": "./src-electron/main.js",   

electron 项目启动

运行 npm run dev 启动项目

源代码地址   electron介绍和使用    

参考自-用electron+vite+vue3搭建桌面端项目https://juejin.cn/post/7360899424107970586?searchId=20240531160216D72EFFA3F6EC00090221#heading-3