用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开发模式

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