vuejs electron webpack集成使用

时间:2023-01-06 19:40:52

传统的vue SPA页面在浏览器环境中使用,但是有的时候我们还希望能够做成一个类似于桌面的app在PC上使用,希望不仅可以使用所有的浏览器SPA的功能,你也可能外加host os的功能,比如文件的本地保存,离线使用等。这时,electron就是一个很好的备选方案。electron本身集成了一个chrome核心的浏览器以及nodejs server模块,既可以使用已有的web技术栈,又能借助electron的跨平台能力,从而实现cross-platform的原生app。

作为开发者,还有一个痛点就是对不同的平台android, ios, windows pc, mac pc, linux pc分别要开发不同的代码,如何能够实现一篇代码在不同device上使用呢?

一个思路是使用微信的小程序,小程序内嵌在微信中,使用web开发技能来构建小程序,由于微信本身是跨平台的,支持各种不同的mobile操作系统,同样也支持pc版本,因此可以作为一个很好的思路去尝试。但是问题在于微信本身是一个封闭的生态,小程序开发虽然解决了开发者部分痛点,但是带来新的痛点:必须依照微信定义的简陋的开发规范,几乎什么都要自己去搭,无法使用巨大的开源力量。

另外一个思路就是使用阿里开源weex,weex专门用于解决开发人员的痛点:实现一份代码,在不同的os上运行,基于vuejs的组件式开发,能够大大提高开发的效率。但是貌似PC版本无法支持,但是这个问题应该可以通过同样聚焦于web开发跨平台应用的electron来解决

https://weex.apache.org/cn/guide/index.html

https://github.com/SimulatedGREG/electron-vue

https://www.gitbook.com/book/simulatedgreg/electron-vue/details/cn

https://coligo.io/bookmarking-app-electron-vuejs-firebase/