Electron-vue开发实战0——Electron-vue入门

原文首发于个人博客，欢迎点击查看得到更好的阅读体验~

前言

前段时间，我用electron-vue开发了一款跨平台（目前支持Mac和Windows）的免费开源的图床上传应用——PicGo，在开发过程当中踩了很多的坑，不只来自应用的业务逻辑自己，也来自electron自己。在开发这个应用过程当中，我学了很多的东西。由于我也是从0开始学习electron，因此不少经历应该也能给初学、想学electron开发的同窗们一些启发和指示。故而写一份Electron的开发实战经历，用最贴近实际工程项目开发的角度来阐述。但愿能帮助到你们。

预计将会从几篇系列文章或方面来展开：

1. electron-vue入门
2. Main进程和Renderer进程的简单开发
3. 引入基于Lodash的json database——lowdb
4. 跨平台的一些兼容措施
5. 经过CI发布以及更新的方式
6. ...（想到再写）

说明

PicGo是采用electron-vue开发的，因此若是你会vue，那么跟着一块儿来学习将会比较快。若是你的技术栈是其余的诸如react、angular，那么纯按照本教程虽然在render端（能够理解为页面）的构建可能学习到的东西很少，不过在main端（electron的主进程）应该仍是能学习到相应的知识的。

Electron简要介绍

一开始学习electron的时候，我被官网文档密密麻麻的概念所镇住了：

概念太多，没有办法一会儿接受。因此我本身学习完electron开发后，作了一张图。来看看图理解一下什么是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密集型应用的话非常问题。

electron-vue的简要介绍

因为我本身是Vue的技术栈，因此就想在electron里使用vue。而vue只是在renderer进程里使用的框架，不涉及到main进程。以下图：

所以react、angluar以及其余的前端开发框架一样适用。

不过想要作到把vue和electron结合起来并非一件特别容易的事。为了方便开发，我使用的是electron-vue，这个是开发者SimulatedGREG参考vue-cli的webpack模板骨架搭建的electron和vue结合的开发脚手架。因为我对于vue-cli很是熟悉，因此上手electron-vue很是容易。相比不少其余的教程或者其余electron+前端开发框架的组装方案，electron-vue给我感受最好的是以下：

1. 只有一个package.json。而大部分其余的项目结构依然在使用两个package.json来应对main进程和renderer进程的依赖库。
2. 内建完整的vue全家桶，省去再次配置vue-router和vuex的一些初期操做。
3. 内建完整的webpack开发、生产等配置，开发环境温馨。
4. 内建完整的开发、构建等npm scripts，使用很是方便。
5. 内建完整的Travis-ci、Appveyor配置脚本，只需少数修改就能作到利用CI自动构建的应用发布。
6. 完善的文档，清晰的项目结构。

大致的项目结构以下，根据选择的不一样设置结构会有所不一样：

my-project
├─ .electron-vue
│  └─ <build/development>.js files
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/
├─ src
│  ├─ main # 主进程
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer # 渲染进程
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ test
│  ├─ e2e
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ utils.js
│  ├─ unit
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ karma.config.js
│  └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md
复制代码

能够看到咱们主要关注的两个文件夹：src/main和src/renderer分别对应的是main进程和renderer进程。咱们的开发大致上也是围绕这两个文件夹展开。

electron-vue安装

参考electron-vue官方的文档给出的说明，搭建electron-vue的脚手架很是方便，使用vue-cli来安装它的模板便可：

# 若是你没有vue-cli的话须要全局安装
npm install -g vue-cli
# 而后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project

# 安装依赖
cd my-project
yarn # or npm install
# 进入开发模式
yarn run dev # or npm run dev
复制代码

若是你是windows用户，在安装期间遇到了关于node-gyp、C++库等方面的问题的话，请参考官方文档给出的解决办法。

若是上述都没有问题，那么你将会看到以下界面：

总结

做为开篇，内容很少。不过把东西说清楚是必须的。对于electron开发实际上是有两种声音的：

1. 很简单，不过就是web开发换了个壳
2. 很难，须要了解不少原生的概念，不知道要怎么入手

其实从本文介绍完，你应该要有一个粗略的认识。electron的开发其实包括了两个部分，一个是main进程的相关开发，一个是renderer进程的相关开发。对于renderer进程的开发对于大多数前端开发人员来讲不难。main进程的相关开发，若是你想要把electron的main进程的因此特性都学一遍、都用一遍，确实是须要很多时间的。不过若是是从需求出发，从工程自己的须要出发，那么只须要用到的时候再去学习便可。不过要对Node.js能作到的事有个概念——它并非万能的。

下一篇文章将会正式开启electron的开发，若是你对此有兴趣不妨关注本系列的进展。