Electron加Vue加ElementUI开发环境搭建
本文将从零开始,进行Electron+Vue+ElementUI的开发环境搭建
Node环境搭建
本文假定你完成了nodejs的环境基础搭建:
镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论)、全局以及缓存路径配置,全局路径加入到了环境变量
1 | node -v |
vue脚手架安装
为了更加便捷的创建一个vue项目,我们安装脚手架@vue/cli和@vue/init(vue-cli已经deprecated了)。之所以要安装@vue/init,是因为@vue/cli是3的版本,创建项目使用命令vue create app-name,且无法暂时无法使用模板,但是下文要用electron-vue模板进行创建,还是需要vue2的init命令来通过指定模板创建项目,为了兼容vue2的init特性,官方提供@vue/init作为桥接方式。
1 | npm install -g @vue/cli |
至此,你可以使用如下的形式,利用vue脚手架结合模板(template)来初始化你的vue项目(app-name)结构
1 | vue init [options] <template> <app-name> |
初始化Electron项目结构
在指定的目录下,我们使用如下的命令进行electron-vue的项目初始化:
1 | vue init simulatedgreg/electron-vue electron-vue-demo |
然而,这个过程很慢,甚至卡住不动。原因是指定模板进行创建时,会拉取github上的仓库进行模板初始化。幸运的是vue提供模板离线初始化的功能。
下载模板源码
https://github.com/SimulatedGREG/electron-vue
下载后解压存放在 用户目录/.vue-templates/ 下(没有就创建,注意复数s),形成如下的结构:
1 | {home目录}/ |
之后就可以使用离线(offline)模式创建:
1 | vue init --offline electron-vue-master electron-vue-demo # 名称和上述文件夹名称一致即可 |
之后就是按照向导进行创建工作:
1 | $ vue init --offline electron-vue-master electron-vue-demo |
运行Electron-Vue示例
1 | $ cd electron-vue-demo |
在install的过程中,我们会看到如下一段console输出:
1 | [email protected] postinstall D:\Projects\electron-vue-demo\node_modules\electron |
可以注意到electron的node包安装完成后,配置了postinstall(安装完成后调用的脚本),该脚本执行其内部install.js脚本后,开始下载electron的二进制的文件。
首先为什么会有这个额外下载的过程呢?在本人看来,electron是基于Chromium内核的跨平台客户端解决方案(本人另一篇文章正好进行了CefSharp的封装工作),既然涉及到跨平台,而不同平台的底层实现必然有所差异,那么electron项目通过自己去实现跨平台,封装底层逻辑,让我们不关心底层的实现,而是专心于前端的开发,封装成果就是上述的electron-v2.0.18-win32-x64.zip内容。这里因为我们调试和构建的时候,就需要运行时,所以electron根据我们的当前的平台,去下载了对应已经完成针对平台编译封装的二进制内容。
为什么要下载的问题搞明白了,接下来我们要看看如何去下载。有些朋友可能会发现,自己在进行electron二进制包下载的时候,速度慢的离谱。为什么这么慢?我会过一两天对下载的脚本一探究竟(时间有限,过两天写)
现阶段我们需要在.npmrc文件中增加一行配置,让electron下载二进制文件的时候从指定的地方下载:
1 | ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ |
完成后,我们在install会发现有明显的提升。完成node包的install后,我们运行命令
1 | npm run dev |
启动后会发现客户端能够运行起来(即主进程能够运行),但是渲染进程报错:
Webpack ReferenceError:process is not defined,官方ISSUE已经存在该条:ISSUE
解决方案为:移除src\index.ejs中的该段代码,详细原因可以看ISSUE。
1 | // src\index.ejs |
移除后,再次运行可以看到渲染成功的界面。
引入ElementUI
引入ElementUI相关包
1 | npm install element-ui -S |
在渲染进程模块的main.js中加入ElementUI组件
1 | import ElementUI from 'element-ui' |
完成配置以后,我们就可以按照以往的方式进行前端的开发了。