1. electron vue 打造自己的im客户端（vue-尊龙凯时登录首页

前言

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

一直以来都是面向百度（谷歌）编程，有什么需求和难点都会搜索解决。但是网上的东西细碎，而且搜索的关键词不对还搜不出内容，就想自己写一些自己的总结性文章。萌发了想要打造一套属于自己的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的版本选择

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