likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 20

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

命令执行后会出现如下交互

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

选择App with Quasar CLI然后按需选择就好，建议此处配置的时候选择Vite而不是webpack，在开发阶段会省下很多时间。

在走完此处流程后，基本的框架已经自动搭建好了，我们进入刚刚构建好的文件夹。

2.2 Electron开发模式

进入这个文件夹后，可以看到内容如下：

用Quasar开发Vue3+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里面找到了，后续在项目中不需要另行配置。

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

如果需要增加别的插件，比如我这里加了一个全局event-bus，则需在boot文件夹下新建对应的文件。

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

上面是一个设置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，他们前端组件升级更新啥的也很快。

唯一不足就是中文文档和技术文章相对较少，碰到问题基本上要去看官网上的英文文档，不过还好英文文档还是挺 完善的。