1. Electron + vue 打造自己的IM客户端（vue-cli-plugin-electron-builder）[初始化]

前言

作为一个普通后端开发，一直都有一个前端的心。

一直以来都是面向百度（谷歌）编程，有什么需求和难点都会搜索解决。但是网上的东西细碎，而且搜索的关键词不对还搜不出内容，就想自己写一些自己的总结性文章。萌发了想要打造一套属于自己的IM系统（后端+客户端）的想法，由于对前端特别是桌面端感兴趣，所以先来用electron仿照微信做一个客户端程序。还在学习中，水平有限，如有错漏请千万不要批评，影响写作动力。

关于electron和vue的结合

• electron-vue

该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

2016年5月初创建的开源项目，但是早已不更新。此为直接搭建好的模板工程，可以直接克隆使用，默认为electron2，但是可以手动更改到electron4。由于不更新，electron的版本也停留在较低的版本，所以基本不推荐使用，除非自己进行更改以适应最新electron版本。

• Quasar

响应式桌面/移动网站，PWA（渐进式Web应用程序），移动APP（外观原生）和多平台桌面应用程序（通过Electron）。

全平台的开发框架，拥有自己的一套定制UI组件。由于对这个框架了解不多，所以此次项目未选择。详细情况请点击Quasar进行查看，文档很丰富。

• *vue-cli-plugin-electron-builder

vue-cli的一个插件，跟随版本更新社区活跃，是本次客户端程序的选择。最新版本最低已经支持到electron9,且经过测试已经达到生产使用。如果是从electron-vue切换到vue-cli-plugin-electron-builder请注意升级node,vue-cli的版本。

开发环境

• Windows10
• vscode
• node 12.16.1
• npm 6.13.4
• yarn 1.22.4
• electron 9.1.1
• Visual Studio 2017 15.7.2 或更高版本
• Python 2.7.10 或更高版本
• Git

推荐使用yarn，切记要更改npm和yarn的源为淘宝源，否则连接外网真的很慢。

vscode 插件配置

vscode 直接在商店中搜索扩展 Vue VS Code Extension Pack 安装即可。

electron的版本选择

1. electron3开始说精力不济不再原生支持预览PDF，但是electron9又改回来可以支持。PDF预览阅读可以使用pdfjs代替。
2. 如果自己学习，那么electron所有版本皆可。但是就我自己使用Windows环境情况来看，用户的机器千奇百怪。首先electron原生不支持WindowsXP，Windows10支持情况很好。重灾区在于Windows7，Windows7有很多民间魔改版本或者是Windows7老版本。这些Windows7普遍.net framework版本偏低，要么更新这些机器的.net framework版本到4.6，要么electron版本选择稍微老一些版本，比如electron5.0.13，否则就会运行错误从而出现白屏。如果想要再保险那么选择打包成32位，这样Windows7及以上就基本都可以适配。
3. 此次使用electron9。

开发编译和打包的依赖下载问题

• vue-cli-plugin-electron-builder1.x

此版本会直接从github上下载某些所需库，导致不走淘宝源的镜像库，卡在编译或者打包环节（其实是文件大小比较大，下载却很慢，过一段时间就超时了）。

• vue-cli-plugin-electron-builder2.x

此次使用2.x版本，直接从淘宝源下载，很顺畅。

1.初始化工程

这里也可以使用vue ui命令打开可视化网页进行工程新建和添加插件。以下是以终端命令的方式新建工程。

1.1 新建工程

使用vue-cli，在终端中输入命令建立工程：

 vue create im-client

根据提示选择所需模块，一步一步来即可。

注意：这里不要选择vue-router的 history模式。history模式依赖后台，electron相当于加载本地静态文件，所以会出现加载错误无法运行。

1.2 添加vue-cli-plugin-electron-builder插件

终端切换到工程根目录运行命令

vue add electron-builder

终端提示选择electron版本，选择electron9即可。 此插件会自动在项目里增加模块和自动生成background.js文件。

electron分为主进程和渲染进程，主进程为纽带负责与底层系统交互，渲染进程负责网页UI展示。background.js为主进程文件。

在package.json文件中把electron版本改为9版本的当前最新

"electron": "^9.1.1"

终端输入 yarn 安装依赖。

 yarn

1.3 开发模式

当以上步骤完成依赖全部安装之后即可进行开发， 终端中输入：

yarn electron:serve

进入开发模式

注意：默认情况下进入开发模式会自动下载chrome商店的vue开发工具插件Vue Devtools，众所周知原因这里会下载不了，起初你以为运行失败了，但是等待一会你会发现终端打印Log尝试失败几次后就会打开开发界面，最好将之注释掉（如果非要这个插件，自行搜索飞机场等关键字），background.js 文件中相关代码位置：

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

1.4 打包配置

electron-builder打包可以打成绿色版不需要安装直接运行（文件未压缩，体积较大），也可以选择打包成exe安装版本（文件压缩，可以选择安装选项）。此次选择绿色版。 在项目根目录新建vue.config.js文件，输入以下代码：

module.exports = {
  pluginOptions: {
    // NOTE:https://www.electron.build
    // NOTE:https://nklayman.github.io/vue-cli-plugin-electron-builder/
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        appId: 'com.ldy',
        productName: 'im-client',
        copyright: 'Copyright©ldy',
        directories: {
          output: './dist_electron' // 输出文件路径
        },
        win: {
          // win相关配置
          icon: 'public/favicon.ico', // 图标256*256
          target: [
            {
              target: 'dir', // 不打包为安装程序
              arch: [
                'x64' //64位
                // "ia32", //32位
              ]
            }
          ]
        }
      }
    }
  }
}

注意图标必须是256*256的ico图标，请自行制作。可以选择在阿里图标库中找到心仪图标之后下载为PNG图片，在线ico转换。

配置好之后，终端输入：

yarn electron:build

就会在dist_electron\win-unpacked目录下生成绿色版程序，双击exe即可运行。

1.5 代码仓库

代码仓库

1.6 最后

把在准备阶段遇到的各种问题都提示出来了，有很多人也遇到这些问题，网上也有很多人说这些问题，大家搜索一下都看看，总有好的解决办法。

未完待续。。。