用Quasar开发Vue3+Electron跨平台应用的简单指南
1. 前言
Quasar是一个开源的vue.js基础框架,简单配置即可在其基础上进行SPA, SSR, PWA, 手机网站以及跨平台应用程序的开发,本文将简述如何基于Quasar + Vue3 + Vite + Electron
进行桌面应用开发。
2. 配置流程
2.1 框架构建
首先,在要存放代码文件夹的目录下执行如下指令,使用yarn
或npm
开始框架配置流程,目前官方对pnpm
的支持还处于实验阶段,所以推荐使用上述的两种方式。
$ yarn global add @quasar/cli
$ yarn create quasar
# or:
$ npm i -g @quasar/cli
$ npm init quasar
命令执行后会出现如下交互
选择App with Quasar CLI
然后按需选择就好,建议此处配置的时候选择Vite
而不是webpack
,在开发阶段会省下很多时间。
在走完此处流程后,基本的框架已经自动搭建好了,我们进入刚刚构建好的文件夹。
2.2 Electron开发模式
进入这个文件夹后,可以看到内容如下:
但此时Quasar
是基础版的,我们要进一步配置以开启Electeon
开发模式。
2.2.1 编辑.npmrc
文件(海外用户可忽略)
由于某些原因,非海外用户在下载Electron
有关的包源文件时可能会遇到很多网络问题,所以先修改.npmrc
文件添加清华源。
# .npmrc文件内容,pnpm相关的是官方设置,不用管
# pnpm-related options
shamefully-hoist=true
strict-peer-dependencies=false
# electron-related options
electron_mirror="https://npm.taobao.org/mirrors/electron/"
ELECTRON_BUILDER_BINARIES_MIRROR="http://npm.taobao.org/mirrors/electron-builder-binaries/"
2.2.2 配置Electron
模式
执行以下指令
quasar mode add electron
quasar会在项目目录下创建src-electron
文件夹并安装相应依赖包。
为方便调试与打包,可在package.json
的scripts
里添加相应指令(dev
与build
)
...
"scripts": {
"test": "echo \"No test specified\" && exit 0",
"dev": "quasar dev -m electron",
"build": "quasar build -m electron",
"gen-icon": "icongenie g -m electron -i public/icons/favicon-128x128.png"
},
...
在项目根目录下,找到quasar.config.js
,其中electron
字段里的就是Electron
打包的配置项,包括是使用packager
还是builder
等等。
// Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf)
// extendElectronPreloadConf (esbuildConf)
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'quasar-project',
win: {
publisherName: "quasar-project-ia32",
target: {
target: "nsis",
arch: ["ia32"]
}
}
}
},
在执行npm run build
的时候,打包所需的依赖包(electron-builder
/ electron-packager
)会自动安装,不需开发者再手动执行安装。
3. 开发要点简述
3.1 文件架构
在项目根目录下src-electron
里面放的是Electron
相关的代码,src
文件夹下放的是mainWindow
的代码(Vue),框架生成的时候已经把基本配置生成好了,可以run npm run dev
试一试效果。
3.2 Boot Files
与一般Vue项目不一样,Quasar里面没有main.js
文件,是用了一系列的boot
文件替代的(按官方说法是可以减轻后期维护压力与方便跨平台开发)。
刚开始配置的时候选择的一些插件,比如axios,已经可以在src/boot
里面找到了,后续在项目中不需要另行配置。
如果需要增加别的插件,比如我这里加了一个全局event-bus
,则需在boot
文件夹下新建对应的文件。
上面是一个设置app全局属性的范例。
但是到了这一步还没完,还需要在前面提到的quasar.config.js
里面找到boot
数组,
加入刚刚新增的文件的文件名。
...
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files
boot: [
'i18n',
'axios',
'global-event-bus'
],
...
剩下的就当正常Vue和正常Electron写就是了。
4. 总结
Quasar
挺好用的,目前基于这套框架开发了几个桌面APP,也没碰到什么bug,他们前端组件升级更新啥的也很快。
唯一不足就是中文文档和技术文章相对较少,碰到问题基本上要去看官网上的英文文档,不过还好英文文档还是挺 完善的。
转载自:https://juejin.cn/post/7153189686091972645