Comment initialiser un projet d’application desktop avec Quasar ?

Quasar est un framework open-source basé sur Vue.js, et permet de créer rapidement des sites / applications dans de nombreuses versions :

SPA : Application mono-page.
SSR : Application dont le rendu est géré côté serveur.
PWA : Progressiv Web App
BEX : Extension de navigateur
Applications mobiles : Android, iOS,… via Cordova ou Capacitor
Applications de bureau multi plateformes : utilisant Electron

La philosophie de Quasar :

Écrire du code une fois et le déployer simultanément en tant que site Web, application mobile et / ou application Electron.

L’objectif est d’avoir une base de code pour chacun d'eux, qui nous aide à développer une application en un temps record en utilisant une CLI (Interface en ligne de commande). Lorsque vous utiliserez Quasar, vous n'aurez pas besoin de bibliothèques lourdes supplémentaires comme Hammerjs, Momentjs ou Bootstrap. Ces besoins sont couverts en interne et le tout avec un faible encombrement !

Installation

D’abord nous allons installer l’interface en ligne de commande avec l’un des deux gestionnaires de paquets de NodeJS à savoir yarn ou npm.

Installation globale de la CLI :

yarn global add @quasar/cli
npm install -g @quasar/cli

Ensuite placez-vous dans le dossier de votre choix et exécuter la commande suivante afin d’initialiser un projet Quasar.

quasar create <folder_name>

Tout comme la CLI de VueJS, vous allez devoir répondre à plusieurs questions pour configurer le projet. Libre à vous de choisir ce qu’il vous plaira mais voici les choix les plus pertinents pour ma démonstration:

Pour le preprocessor css: Sass with SCSS syntax ou rien
Pour la stratégie d’importation des composants Quasar : Auto-import
Sélectionnez les dépendances que vous souhaitez joindre au projet à l’aide votre barre d’espace puis validez avec la touche "Entrée".
Si vous souhaitez créer une application mobile, vous devez ensuite saisir un identifiant unique pour cette application.
Pour le gestionnaire de paquet, fonctionnez à votre guise également.

Et voilà ! vous êtes prêt à mettre les mains dans le cambouis et commencer à développer votre projet Quasar.

Mon Application Desktop

Pour développer une application Quasar Electron, vous devez ajouter le mode Electron à votre projet en utilisant la CLI et en saisissant la commande suivante :

quasar mode add electron

Remarquez l’apparition du dossier src-electron au sein de votre projet.

Chaque application Electron à deux threads ou fil d'exécution. Le principal thread s’occupe du traitement de la fenêtre OS et de l’initialisation du code. C’est dans ce dossier src-electron que tout cela est géré. Le second thread, du dossier src, traite du contenu réel de notre application.

Si tout est bon, vous pouvez démarrer le développement de votre projet avec la commande suivante:

quasar dev -m electron

A noter : il n’est pas nécessaire d’ajouter le mode electron au préalable, si vous exécutez la commande ci-dessus, ce mode sera automatiquement ajouté.

Remarquez l’ouverture de votre application, avec le contenu par défaut de Quasar. L’inspecteur s'ouvre directement et vous êtes enfin prêt pour commencer à coder.