Bei Quasar handelt es sich um ein auf Vue.js basierendes Framework. Details dazu habe ich euch schon in einem anderen Blogpost geschrieben.
Quasar lässt sich auf verschiedene Arten nutzen, z. B. durch einfaches laden der Quellen aus einem CDN oder durch Installation des Vue CLI Quasar Plugins. Ich verwende hier die Installation des Quasar-CLI, da uns das Command Line Interface später auch noch viele weitere Tools zur Verfügung stellt.
Wie man in wenigen Schritten ein eigenes Quasar-Projekt anlegt, zeige ich hier.
Vorbereitung: Nodejs und npm
Um loszulegen, benötigen wir npm (Node Package Manager), einen Paketmanager für die JavaScript-Laufzeitumgebung Node.js. Node.js kommt dabei immer als „Bundle“ beim npm mit. Unter Linux dürfte npm im bevorzugten Paketmanager zur Verfügung stehen, ansonsten gibt es auf nodejs.org Installer für Windows und Linux. Ob npm erfolgreich installiert würde, könnt ihr überprüfen:
$ npm -v
$ node -v
Er sollte euch dann die installierten Versionen anzeigen.
Quasar-CLI installieren
Ist npm einmal installiert, lässt sich auch das Quasar-CLI einfach hinzufügen:
$ npm install -g @quasar/cli
Die Installation wird einen Moment benötigen. Der npm lädt alle Pakete und Abhängigkeiten, die von Quasar benötigt werden, herunter und installiert diese ebenfalls. Um zu testen, ob Quasar läuft, reicht ein
$ quasar -v
Das sollte uns dann die installierte Quasar-Version anzeigen. Damit sind wir startklar, um das erste Quasar-Projekt anzulegen.
Quasar-Projekt anlegen
Wie schon erwähnt, empfehle ich immer die Installation des Quasar-CLI, weil uns dieses Tool viele kleine Helferlein zur Verfügung stellt. So gibt es auch einen Befehl, der uns durch einen kleinen Assistenten führt, um ein neues Quasar-Projekt aus dem Boden zu stampfen. Wir nennen unser Projekt – wie sollte es auch anders ein – hallo-welt:
$ npm init quasar
Das CLI begrüßt uns mit einem kleinen Assistenten, den wir nun Schritt für Schritt durchgehen. Beim ersten Ausführen werden wir noch gefragt, ob wir das create-quasar Package installieren möchten. Natürlich möchten wir.
Need to install the following packages:
create-quasar
OK to proceed? (y) y
Anschließend möchte Quasar gerne wissen, was genau wir bauen möchten. Natürlich eine App mit Quasar-CLI.
? What would you like to build? » - Use arrow-keys. Return to submit.
> App with Quasar CLI, let's go! - spa/pwa/ssr/bex/electron/capacitor/cordova
AppExtension (AE) for Quasar CLI
Quasar UI kit
Weiter geht’s mit der Angabe des Verzeichnisses, in dem unsere App erstellt wird:
? Project folder: » hallo-welt
Und die zu nutzende Quasar-Version müssen wir auch angeben. Natürlich Quasar v2 mit Vue.js 3:
? Pick Quasar version: » - Use arrow-keys. Return to submit.
> Quasar v2 (Vue 3 | latest and greatest) - recommended
Quasar v1 (Vue 2)
Welchen Script-Type wir wählen, bleibt der persönlichen Vorliebe geschuldet. Bei mir ist es das ganz normale Javascript. Natürlich könnt ihr auch Typescript nehmen:
? Pick script type: » - Use arrow-keys. Return to submit.
> Javascript
Typescript
Webpack oder Vite? Ich persönlich stehe auf Webpack:
? Pick Quasar App CLI variant: » - Use arrow-keys. Return to submit.
> Quasar App CLI with Webpack
Quasar App CLI with Vite
Dann bekommt unser neues Projekt noch einen Paketnamen, einen Produktnamen, eine Beschreibung und einen Autoren. Was ihr hier eingebt, ist erstmal relativ egal:
? Package name: » hallo-welt
? Project product name: (must start with letter if building mobile apps) » Awesome Hallo-Welt-App
? Project description: » Eine besonders gute Hallo-Welt-App
? Author: » Thomas Nienhaus
Als CSS preprocessor nehmen wir Sass mit SCSS syntax:
? Pick your CSS preprocessor: » - Use arrow-keys. Return to submit.
> Sass with SCSS syntax
Sass with indented syntax
None (the others will still be available)
Nun kommt der eigentlich wichtigste Punkt: Es lassen sich direkt noch weitere Pakete mit installieren. Wir wählen hier ESLint, Pinia und Axios.
ESLint ist ein Code-Analyzer, der dabei hilft, Fehler zu finden und zu beheben.
Pinia ist ein State-Manager. Bisher gab es hier Vuex als Standard im Vue.js-Ökosystem. Vuex wurde dabei direkt vom Vue.js-Team zur Verfügung gestellt. Inzwischen ist man jedoch auf Pinia gewechselt und erklärt das so:
Pinia is now the new default
The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well.
https://vuex.vuejs.org/
Da es natürlich keinen Sinn macht, auf etwas veraltetes zu setzen, gehen wir direkt auf Pinia.
Axios ist die de-facto-Standard-Library, um (asynchrone) HTTP-Requests mit Javascript durchzuführen. Axios bringt gegenüber der standardmäßigen fetch-API viele Vorteile mit.
Für unser Hallo-Welt-Projekt benötigen wir natürlich weder Pinia noch Axios. Beides gehört für mich jedoch zum Standardumfang, daher installieren wir es auch hier direkt mit.
? Check the features needed for your project: »
Instructions:
↑/↓: Highlight option
←/→/[space]: Toggle selection
a: Toggle all
enter/return: Complete answer
(*) ESLint - recommended
(*) State Management (Pinia)
( ) State Management (Vuex) [DEPRECATED by Vue Team]
(*) Axios
( ) Vue-i18n
Die restlichen Fragen beantworten wir jeweils mit der vorgegebenen Standard-Antwort. Natürlich möchten wir Prettier, einen Code Formatter, installieren. Und auch die Abhängigkeiten sollen bitte automatisch von unserem Paketmanager npm aufgelöst und installiert werden:
? Pick an ESLint preset: » - Use arrow-keys. Return to submit.
> Prettier - https://github.com/prettier/prettier
Standard
Airbnb
? Install project dependencies? (recommended) » - Use arrow-keys. Return to submit.
> Yes, use npm
No, I will handle that myself
Geschafft! Unser erstes Quasar-Projekt ist nun im Verzeichnis hallo-welt installiert. Da Quasar einen eigenen Entwicklungsserver mitbringt, können wir nun ins Verzeichnis wechseln und ihn starten:
$ cd hallo-welt
$ quasar dev
Jetzt passiert folgendes: Der Quasar-Entwicklungsserver checkt, ob alle Voraussetzungen erfüllt sind, dann kompiliert er alle Dateien unseres neuen Projektes, startet einen einfachen Webserver (in der Regel auf Port 8080) und öffnet die passende URL in unserem Standardbrowser. Voilà! Wir sehen unsere erste Quasar-App.
