使用electron+vue开发桌面应用

news2024/10/21 11:29:58

electron是什么

electron由Node.js+Chromium+Native APIs构成。你可以理解成，它是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器，可以用来开发跨平台的桌面级应用。它的开发主要涉及到两个进程的协作——Main（主）进程和Renderer（渲染）进程。简单的理解两个进程的作用：

1.Main进程主要通过Node.js、Chromium和Native APIs来实现一些系统以及底层的操作，比如创建系统级别的菜单，操作剪贴板，创建APP的窗口等。

2.Renderer进程主要通过Chromium来实现APP的图形界面——就是平时我们熟悉的前端开发的部分，不过得到了electron给予的加强，一些Node的模块（比如fs）和一些在Main进程里能用的东西（比如Clipboard）也能在Render进程里使用。

3.Main进程和Renderer进程通过ipcMain和ipcRenderer来进行通信。通过事件监听和事件派发来实现两个进程通信，从而实现Main或者Renderer进程里不能实现的某些功能。

electron的优缺点

优点：

1.从上述介绍可以发现，除了不同平台Native APIs不同以外，Node.js和Chromium都是跨平台的工具，这也为electron生来就能做跨平台的应用开发打下基础。

2.开发图形界面前所未有的容易——比起C#\QT\MFC等传统图形界面开发技术，通过前端的图形化界面开发明显更加容易和方便。得益于Chromium，这种开发模式得以实现。

3.成熟的社区、活跃的核心团队，大部分electron相关的问题你可以在社区、github issues、Stack Overflow里得到答案。开发的障碍进一步降低。

缺点：

1.应用体积过大。由于内部包装了Chromium和Node.js，使得打包体积（使用electron-builder）在mac上至少是45M+起步，在windows上稍微好一点，不过也要35M+起步。不过相比早期打包体积100M+起步来说，已经好了不少。不过解压后安装依然是100M+起步。

2.受限于Node.js和Native APIs的一些支持度的问题，它依然有所局限。一些功能依然无法实现。比如无法获取在系统文件夹里选中的文件，而必须调用web的File或者node的fs接口才可以访问系统文件。

3.应用性能依旧是个问题。所以做轻量级应用没问题，重量级应用尤其是CPU密集型应用的话很是问题。

开始

一、创建vue项目

vue create demo

二、安装electron、electron-builder、

vue add vue-cli-plugin-electron-builder

vue add electron-builder

这是我们的package.json

{

  "name": "electron-vue",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "electron:build": "vue-cli-service electron:build",

    "electron:serve": "vue-cli-service electron:serve",

    "postinstall": "electron-builder install-app-deps",

    "postuninstall": "electron-builder install-app-deps"

  },

  "main": "background.js",

  "dependencies": {

    "core-js": "^3.6.5",

    "vue": "^2.6.11",

    "vue-router": "^3.2.0",

    "vuex": "^3.4.0"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-router": "~4.5.0",

    "@vue/cli-plugin-vuex": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

    "electron": "13.0.0",

    "electron-devtools-installer": "^3.1.0",

    "node-sass": "^4.12.0",

    "sass-loader": "^8.0.2",

    "vue-cli-plugin-electron-builder": "^2.1.1",

    "vue-template-compiler": "^2.6.11"

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

}

三、项目文件目录：

我们将在main主进程中处理app的安装步骤，窗口位置，大小等等。

renderer进程就是熟悉的vue项目结构，处理具体业务逻辑。

四、修改src目录下backgroud.js，配置应用参数。

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
const path = require('path')

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,//窗口大小
    webPreferences: {
      webSecurity: false,  //取消跨域限制
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}
......

五、编译并启动app

cd demo

npm install

npm run electron:serve

成功后我们将看到如下运行效果：

接下来我们就可以进行项目开发，处理业务逻辑，开发桌面应用了。

六、进程间通信

与web项目开发不同的是，我们需要在Main和Renderer进程之间通信。这里简单介绍一下：

主进程:
const {ipcMain} = require('electron')
// 监听渲染程序发来的事件
ipcMain.on('something', (event, data) => {
    event.sender.send('something1', '我是主进程返回的值')
})

渲染进程:
const { ipcRenderer} = require('electron')
// 发送事件给主进程
ipcRenderer.send('something', '传输给主进程的值')  
// 监听主进程发来的事件
ipcRenderer.on('something1', (event, data) => {
    console.log(data) // 我是主进程返回的值
})