Mise en place

Node.js et NPM

Pour fonctionner, Quasar nécessite l'installation de :

• la plateforme logicielle JavaScript Node.js

• du gestionnaire de paquets NPM

C'est quoi un gestionnaire de paquet ???

C'est un outil automatisant le processus d'installation, de désinstallation et de mise à jour de logiciels et librairies, installés sur un système informatique.

Pour installer NPM et Node.JS, il est recommendé d'utiliser un outil tel que NVM (lien macOS), qui permet de basculer entre différentes versions de node et NPM. Une fois l'outil installé, il suffit de taper nvm i v18 pour installer la version 18 et nvm use 18 pour définir la version 18 comme active.

Installation

Pour les installer, il suffit de télécharger et installer la dernière version LTS (Long-Term Support ou Support à long terme en français) de Node.js qui installera également la dernière version de NPM.

Node.js — Télécharger Node.js®nodejs.org

Télécharger Node.js

Vérifier l'installation et la version active de Node.js et de NPM

Pour vérifier que l'installation s'est bien déroulée et connaître les versions des logiciels, ouvrez le terminal et entrez les commandes suivantes :

#version active de Node.js
node -v
v18.16.0

#Version active de NPM
npm -v
9.5.1

Installer Quasar CLI

L'installation du client Quasar se fera en via un gestionnaire de paquet.

# Node >= 14 et NPM >= 8 sont requis
npm i -g @quasar/cli

Créer un nouveau projet Quasar

La création se fera dans le terminal, et créera un nouveau dossier qui contiendra tous les fichiers du projet.

1. Ouvrir le terminal, invite de commandes.

2. Se positionner dans le dossier qui contiendra le dossier de votre application.

3. Exécuter la commande suivante:

# Création d'un nouveau projet Quasar
npm init quasar

Ouvrir rapidement un invite de commande dans le dossier courant de l'explorateur - Kévin SubileauKévin Subileau

Faire les choix suivants dans l'assistant

Remplacer <nom_projet> par le nom de votre projet, par exemple quasar-demo.

? What would you like to build?
› App with Quasar CLI, let's go!

? Project folder: 
› nom_projet

? Pick Quasar version:
› Quasar v2 (Vue 3 | latest and greatest)

? Pick script type:
› TypeScript

? Pick Quasar App CLI variant:
› Quasar App CLI with Vite

? Package Name:
› nom_projet

? Project product name: (must start with letter if building mobile apps)
› Nom Projet

? Project description: 
› A Quasar Project

? Author: 
› Steve Fallet <[e-mail]>

Pick a Vue component style: 
› Composition API with <script setup>

? Pick your CSS preprocessor:
› Sass with SCSS syntax

? Check the features needed for your project:
◉   ESLint
◉   State Management (Pinia)
◉   Axios

? Pick an ESLint preset:
› Standard

? Install project dependencies? (recommended)
› Yes, use NPM

Votre nouveau projet a été créer dans le dossier <nom_dossier_projet> et NPM va directement télécharger toutes les librairies nécessaires dans <nom_dossier_projet>/node_modules/ .

Si vous utilisez Quasar avec Node v20, vous aurez un avertissement lors de l'execution. Pour y remédier il faut éditer le fichier package.json de votre projet et remplacer les lignes suivantes:

"engines": {
  "node": "^18 || ^16 || ^14.19",
  // ...
}

Par

"engines": {
  "node": "^20 || ^18 || ^16 || ^14.19",
  // ...
}

On a sélectionné TypeScript pour pouvoir sélectionner l'option

› Composition API with <script setup>

après coup. TypeScript est un ensemble parent à JavaScript, ce qui signifie que tout JS valide est TS valide. TypeScript aura pour effect d'ajouter un typage statique sur nos variables, mais on peut principalement l'ignorer.

Pour plus d'informations: Documentation TS

Pour débuter avec TS: Les bases de TS

Exécuter un projet Quasar

Quand NPM a terminé de télécharger les paquets, on peut lancer notre projet.

# Monter dans le dossier du nouveau projet
cd <nom_dossier_projet>

# Lancer le projet en mode développement
quasar dev
# ou 
npx quasar dev

Cela va démarrer votre serveur de développement et ouvrir votre application dans votre navigateur.

L'application par défaut de Quasar