mac 环境，利用builder构建electron-vue的范例？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

自从react许可证事件爆发后，reactjs在广大开发者心目中的形象一落千丈。广大码农不得不考虑自己以后的技术转型问题，那么国内的尤雨溪大神的大作vue，就显得更加星光闪耀了。那么作为跨平台的代表electron，与vue的火花碰撞的组合，就是electron-vue了。这个东东的作者貌似是美国人，建议大家去他的github上面去看看，几个项目都非常好，网址见本文末尾。

苏南大叔在本文中，将为大家描述：在mac系统下，如何运行及编译electron-vue的demo。整个过程是在mac系统下截图的，在win下面应该大同小异。不过win下面对于打包的过程，应该会有特殊的设置，这些内容，将会在苏南大叔的后序文章中，有所涉及。

安装vue-cli

sudo npm install -g vue-cli

本步骤并不是每次都需要的，只需要执行一次即可。全局安装的是vue的命令行。

初始化项目

vue init simulatedgreg/electron-vue my-project

simulatedgreg/electron-vue 这个就是美国山姆大叔为我们贡献的模板文件了，对应的是github上面的对应仓库。需要说明的是my-project，是你的项目名字，请替换成你自己的名字。

这个命令执行完毕后，会出现很多设置项询问项目，出现在命令行里面，需要进一步根据提示，进行操作。
选择vue的插件，我们直接回车，默认安装全部插件即可。至于列出的这4个插件，大家可以点击这里，查看具体的功能。

• http://electron.org.cn/vue/vue_accessories.html

而关于eslint语法习惯检查这块，事实上，选择与否没有啥大的用途。只是会给大家徒增很多BT限制。个人建议：最好不要启用eslint。至于测试部分，苏南大叔都选择的是no。而构建的方式，我们选择更加先进的electron-builder。回答完这么多设置选项后，目前项目my-project就顺利生成了。

关于packager和builder的对比，我们可以点击这里查看:

• http://electron.org.cn/vue/building_your_app.html

安装npm依赖包

yarn # 或者 sudo npm install

关于npm包的安装，我们当然推荐使用更加先进的yarn了。如果您还没有安装yarn，那么可以点击这里查看相关的安装事项：https://yarn.org.cn/ 。当然，你也可以使用传统的npm来安装相关依赖。

运行项目并调试

yarn run dev

这个时候，执行的js是：src/main/index.dev.js，我们需要注意里面的如下语句：

require('electron-debug')({ showDevTools: true })

这里就是用于控制浏览器的devtools的。

生成可执行文件dmg

当你对自己的代码开发完毕后，你就可以生产自己的可执行文件了。当然在mac下面，也是可以生成exe的。但是苏南大叔认为，不如换到win系统下面，去build个exe，更为靠谱一些。

yarn run build

build之后，我们就可以拿到我们的第一个mac程序的dmg文件了，dmg的路径在my-project/build/下面。拖动一下安装完成，成就感满满的。

相关链接

文章中的相关网址见这里：

• vuejs：https://cn.vuejs.org/
• electron中文网： http://electron.org.cn/
• electron-vue文档：http://electron.org.cn/vue/index.html
• electron-vue的git：https://github.com/SimulatedGREG/electron-vue

总结

关于 electron + vue + mac 的组合demo，苏南大叔就先讲到这里。欢迎大家继续关注苏南大叔的后续electron相关文章：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。