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

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

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

安装vue-cli

sudo npm install -g vue-cli

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

mac环境,利用builder构建electron+vue的demo - 002

mac环境,利用builder构建electron+vue的demo(图15-1)

初始化项目

vue init simulatedgreg/electron-vue my-project

在这里,需要说明的是my-project,是你的项目名字,请替换成你自己的名字。simulatedgreg/electron-vue 这个就是美国山姆大叔为我们贡献的模板文件了,对应的是github上面的对应仓库。所以,一般情况下来说,我们不应该修改。

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

mac环境,利用builder构建electron+vue的demo - 003

mac环境,利用builder构建electron+vue的demo(图15-2)

而关于语法习惯检查这块,我们选择使用airbnb,事实上,选择与否没有啥大的用途。只是会给大家徒增很多BT限制。
mac环境,利用builder构建electron+vue的demo - 004

mac环境,利用builder构建electron+vue的demo(图15-3)

至于测试部分,苏南大叔都选择的是no。而构建的方式,我们选择更加先进的electron-builder。关于packager和builder的对比,我们可以点击这里查看,https://electron.org.cn/vue/building_your_app.html

mac环境,利用builder构建electron+vue的demo - 008

mac环境,利用builder构建electron+vue的demo(图15-4)

回答完这么多设置选项后,我们的项目『my-project』就顺利生成了。

mac环境,利用builder构建electron+vue的demo - 009

mac环境,利用builder构建electron+vue的demo(图15-5)

安装npm依赖包

yarn # 或者 sudo npm install

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

mac环境,利用builder构建electron+vue的demo - 010

mac环境,利用builder构建electron+vue的demo(图15-6)

运行项目并调试

yarn run dev

mac环境,利用builder构建electron+vue的demo - 020

mac环境,利用builder构建electron+vue的demo(图15-7)

mac环境,利用builder构建electron+vue的demo - 061

mac环境,利用builder构建electron+vue的demo(图15-8)

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

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

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

mac环境,利用builder构建electron+vue的demo - 060

mac环境,利用builder构建electron+vue的demo(图15-9)

生成可执行文件dmg

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

yarn run build

mac环境,利用builder构建electron+vue的demo - 021

mac环境,利用builder构建electron+vue的demo(图15-10)

build之后,我们就可以拿到我们的第一个mac程序的dmg文件了,dmg的路径在my-project/build/下面。拖动一下安装完成。成就感满满的。
mac环境,利用builder构建electron+vue的demo - 022

mac环境,利用builder构建electron+vue的demo(图15-11)

mac环境,利用builder构建electron+vue的demo - 024

mac环境,利用builder构建electron+vue的demo(图15-12)

mac环境,利用builder构建electron+vue的demo - 025

mac环境,利用builder构建electron+vue的demo(图15-13)

mac环境,利用builder构建electron+vue的demo - 026

mac环境,利用builder构建electron+vue的demo(图15-14)

mac环境,利用builder构建electron+vue的demo - 027

mac环境,利用builder构建electron+vue的demo(图15-15)

总结

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

vuejs:https://cn.vuejs.org/
electron中文网: https://electron.org.cn/
electron-vue文档:https://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/

  【electron】秘籍文章入口,仅传授于有缘之人  electron    vue

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-vue-demo-mac-builder.html
上一篇好文:调试运行electron项目的几种姿势
下一篇好文:mac环境,利用packager构建electron+vue的demo

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~