likes
comments
collection
share

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

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

1. 前言

Quasar是一个开源的vue.js基础框架,简单配置即可在其基础上进行SPA, SSR, PWA, 手机网站以及跨平台应用程序的开发,本文将简述如何基于Quasar + Vue3 + Vite + Electron进行桌面应用开发。

2. 配置流程

2.1 框架构建

首先,在要存放代码文件夹的目录下执行如下指令,使用yarnnpm开始框架配置流程,目前官方对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.jsonscripts里添加相应指令(devbuild

    ...
    "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,他们前端组件升级更新啥的也很快。

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

转载自:https://juejin.cn/post/7153189686091972645
评论
请登录