Electron-Vue-ElementUI环境搭建

导读

一开始Vue生态还尚未完善的时候，Electron和其他框架很难整合。现在Vue生态逐步完善了，整合Electron也方便很多了。

注：本篇将默认大家都会使用nodeJS。

以前的方法

之前Electron只兼容了vue-cli2.x，所以只能使用

vue init simulatedgreg/electron-vue ${your-project-name}

虽然比较方便，但是很不幸，安装依赖的时候不管是否都无法下载。所以，只能单独使用Electron或者Vue，体验很差。

新的方法

现在Electron兼容了Vue3.x（实际上还是vue2.x，只是使用vue-cli3构建应用更方便），所以就有了全新的简便方法。

首先，我们先创建一个vue3项目：

vue create demo

在执行之后，vue就会让你选择应该如何做。

如果你使用的是Windows，那么很抱歉，你无法享受直接使用键盘选择命令行中的各种模块；如果你使用的是Ubuntu，但是并不熟悉这些模块分别是干什么，那就默认安装吧。这个仅用于学习的小项目不会很复杂的；如果你非常熟悉这些模块分别有什么作用，那么还需要我说么？开玩笑的啦，一般我们选择Router、Bable就够了。如果你需要更严格的标准，请下载ESLint；如果你希望更简洁的编辑方式，那么请坚持使用ES6+。

另外还强调一点，由于Electron在开发的时候并没有强调Vue的版本问题，所以连官方文档都没有强调这一点。于是很坑爹的就是，现在Electron仅支持Vue2.x。

这里当然还是推荐自定义。一方面，你能明白哪些东西是在干什么。就算没用过，多少查一查嘛；另外，因为Electron目前虽然能够作出跨平台窗口，却有着致命的弱点：目前为止没有完美的框架模板。所以Electron就只能完成一个普通的窗口，剩下的还是得自己造轮子。是不是一听到“造轮子”就开始头大了？生态还没有完全建立起来，还需要许许多多的开发者共同努力的呀；还有，对于想要集成ElementUI的开发者来说，history mode简直就是噩梦一般的存在。明明一点错误都没有，但就是编译不通过。非常痛苦。

言归正传在。新建之后，如果我们直接向项目中加入electron-builder，将会出现很多的问题。目前还没有什么好的办法能够支持这样的问题，即使是大佬遍地的StackOverflow也没有什么很亲民的解法。所以，这里推荐先安装ElementUI。

vue add element

实际上全名是：vue-cli-plugin-element，可以写全，也可以就写后一半，都没有问题。

不过别忘了，3.0可不只更新了库，还有用户界面：

vue ui

运行之后就能够看到一个网页：

导入本地项目之后就可以使用非常方便的界面安装库：

是不是非常的厉害？但是比起Ubuntu的命令行，ui还是不太确定当前进度在哪。而在安装Electron的时候，大量的包需要下载，没钱买百兆光纤的我迫切需要知道现在下载了多少。所以我更喜欢命令行。但是ui其实对于Windows用户还是非常亲切的。这就看各位如何取舍了。

接着，我们来测试一下：

npm run serve

嗷，弹出了一个网页，这就是Vue的部分，能够成功完成一个普通的网页：

看起来挺不错的，甚至还有来自ElementUI贴心的测试按钮el-button。那么剩下的就是ELectron了。

开始安装electron-builder。

vue add electron-builder

当然，你可以使用vue ui来安装，没有任何问题。

完成之后我们再试试：

npm run electron:serve

嗷，弹出了个窗口，这就是Electron的部分，能够成功完成一个跨平台的窗口。

大功告成。

现在看完了这篇教程会不会感觉轻松一点了？接下来的毕竟和ElementUI+Vue开发页面完全一样了嘛。

踩坑记录

• 如果是先安装electron-builder，那么在ELement UI使用的时候就会出现白屏，然后在F12中提示当前浏览器不支持。按照本文的安装顺序就好了。

• 虽然目前支持vue-cli3，但是Electron依然不支持Vue3.x，所以在选择Vue版本的时候，请务必选择Vue2.x，否则还是会白屏。