用Quasar开发Vue3+Electron跨平台应用的简单指南

news2024/11/25 4:20:21

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-electronelectron: {// 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/configurationappId: '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-filesboot: ['i18n','axios','global-event-bus'],...

剩下的就当正常Vue和正常Electron写就是了。