Quasar框架:抛弃electron-vue,正当时的跨平台Vue开发

2,565 阅读1分钟

Vue脚手架工具electron-vue已经过时

  • 运行出错(如图)

  • 开发停顿(该问题很容易修复却将近一年无人问津)

  • 版本落后(默认模板electron版本^2.0.4,最新版本为7)

可以说作者几乎放弃了这个包,我们没理由继续使用了。

Quasar框架

Quasar框架可以说是electron-vue的超集,不仅包含全部原有的功能,还具有跨平台跨设备(包括iOS、Android)等的新特性,全自动打包。So Easy!

按照官方的话来说:

Quasar是基于Vue的第一解决方案,无论您是仅构建桌面网站、桌面应用还是移动应用,或者所有这些。

这个优秀的框架也有很久了,但不知为何鲜有人提,我是在浏览Vue.js文档时偶然发现的,惊为天人。

这里仅以Electron桌面应用为例介绍。

安装Quasar

# Node.js >= 8.9.0 is required.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

建立新的Quasar项目

quasar create [YOUR-PROJECT]

添加electron模式

quasar mode add electron

启动开发环境

quasar dev -m electron

支持HMR模块热替换,调试框架代码Very Good!

打包

建议修改打包器为electron-builder,直接将程序打包为AppImage。

开始打包

quasar build -m electron

一切正常。如果出错,yarn install后再试。

支持交叉打包,请参考electron-builder文档

有用的工具

布局创造器:quasar.dev/layout-buil…