使用electron+vue开发桌面应用

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-buildervue 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 infonodeIntegration: 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 modeawait 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 developmentwin.loadURL('app://./index.html')}
}
......

五、编译并启动app

cd demonpm installnpm 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) // 我是主进程返回的值
})