从零开始手把手教利用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`官方脚手架

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

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

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

       完善开发环境

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

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

改造前：
 
```js
"scripts": {
  "serve": "vue-cli-service serve",
  "ele": "electron ."
}
```
 
改造后：
```js
"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 解决多开启多个命令行运行和白屏的问题，这让开发更加简单快捷。