从零开始手把手教利用electorn+vue搭建一套客户端开发环境

本文正在参加「金石计划」

利用electron开发桌面应用时，首先会遇到这么一个问题：网上很多的electron+vue开发框架太繁琐复杂，同时技术栈都比较老旧，有时候升级某个包报一堆的错误，这些错误又涉及到桌面软件开发的知识，这对于前端开发者来说无疑是噩梦。

因此，搭建一套属于自己的electron+vue开发框架显得格外重要，好处是我可以随意扩展和配置。

本文将从零开始利用elelctron和webpack+vue3教你如何搭建一套桌面开发环境。

开发环境组成

我们知道，利用electron开发客户端，页面全部都是用html+css+js编写，这为前端开发者开发客户端提供了可能。同时，随着web技术的飞速发展，在开发效率和页面效果展示方面是其他技术所不能比拟的，这也是为什么electron越来越火的原因。

对于今天的前端开发来说，一般使用vue/react框架来开发web页面，因此，整个开发环境架构如下图所示：

它包括两个部分：electron和web页面:

• electron：左边的electron可以理解为一个浏览器，本质上它是由chromium和nodejs构成。choromium提供了UI界面的展示，nodejs提供操作本地电脑的能力。

• web页面： 右边是用@vue/cli脚手架搭建的vue开发环境，用来创建客户端页面。

中间通过electron提供的接口window.loadURL去加载 web 页面，这样electron就能显示页面。

下面，我们将分别搭建这两部分。

创建web页面

1、安装vue官方脚手架，参考vue/cli安装。

npm install -g @vue/cli

2. 利用脚手架创建项目

vue create electron-vue-demo

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选”手动选择特性”来选取需要的特性。这里我们选择默认的就可以了。

3. 执行npm run serve启动界面

这样，我们就创建好了web页面的结构，这非常简单，跟我们开发web项目是一样一样的。

下面将在该工程下安装electron，及做相关的配置。

创建electron

1. electron镜像设置

因为electron放在国外的服务器上，国内环境访问很慢而导致下载失败，因此需要配置镜像。

找到npm的配置文件.npmrc，加入如下代码到配置文件中：

electron_mirror=https://npmmirror.com/mirrors/electron/

如果你不想设置.npmrc，可以在安装的时候直接指定镜像源，如下：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev

2. 安装electron

npm install electron --save-dev

3. 新建主进程文件main.js

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

app.whenReady().then(() => {
    // 创建一个窗口来展示web页面
    createWindow()
    
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

// 相关代码electron官网有详细的介绍
const createWindow = () => {
  const config = {
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  }
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    ...config
  })
  mainWindow.loadURL('http://localhost:8080/')
} 

4. 配置package.json

首先修改main字段，其路径为我们上面创建的main.js文件路径

{
  "main": "main.js"
}

然后在scripts中新增加一个命令：

"scripts": {
  "ele": "electron ."
}

5. 启动命令npm run ele

【注意】：你需要新开一个命令行启动electron。第一个命令行用于启动web页面，第二个命令行用于启动electron。

这样我们的web页面就展示在electron提供了客户端了。

完善开发环境

上面提到需要开启两个命令行才能启动我们的客户端，并且你要先启动web页面，然后才能启动electron，这样就非常繁琐，开发起来非常不爽。下面我们将解决这个问题。

我们知道npm提供了一个&&符号，它用来连接两条命令，因此我们可以这么改造：

改造前：

"scripts": {
  "serve": "vue-cli-service serve",
  "ele": "electron ."
}

改造后：

"scripts": {
  "serve": "vue-cli-service serve",
  "ele": "electron .",
  "dev": "npm run serve && npm run ele"
}

当你执行npm run dev时，会首先打开一个白屏，等待一会后刷新才会出现内容。这是为什么呢？

因为，这两个命令的执行是同时启动的，而npm run serve的启动需要一定的时间，当npm run ele打开客户端时，页面根本就没有生成，所以是白屏。

还有一个问题是，&&这个符号不是跨平台的，在window系统是不好使的。

问题一: 如何跨平台的同时运行两个命令？

这个问题我们可以利用一个npm包来解决：concurrently。

首先安装concurrently，关于它的使用请查看npm网站。

npm i concurrently --save-dev

因此，现在scripts就变为:

"scripts": {
  "serve": "vue-cli-service serve",
  "ele": "electron .",
  "dev": "concurrently \"npm run ele\" \"npm run serve\""
}

现在，我们只需要执行npm run dev就可以同时跑两个命令了。

问题二: 如何解决白屏？

这个问题的本质是等npm run serve启动完成后才去启动npm run ele。

这个我们也可以通过一个npm包来完成：wait-on。

首先安装wait-on：

npm i wait-on --save-dev

然后改造scripts：

"scripts": {
  "serve": "vue-cli-service serve",
  "ele": "electron .",
  "dev": "concurrently \"wait-on http://localhost:8080/ && npm run ele\" \"npm run serve\""
}

wait-on http://localhost:8080/ && npm run ele这段代码的意思是等待http://localhost:8080/启动完成后，再启动npm run ele，这样白屏问题就得到解决了。

通过上面的两个问题我们发现，npm上有很多小工具是非常实用的，这些小工具是可以运用在你的项目中的。

总结

本文通过创建web页面和创建electron两部分搭建了一个完整的electron+vue的桌面端开发环境。

通过两个npm的小工具concurrently和wait-on解决多开启多个命令行运行和白屏的问题，这让开发更加简单快捷。