导读
一开始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
,否则还是会白屏。