APIs und VueJS mit dem Batix Framework

Dies ist eine Vorschau des aktuellen Arbeitsstandes der Dokumentation!

# Ein Vue-Projekt erstellen

In einem Ordner der Wahl, in dem ein neues Vue-Project erstellt werden soll folgenden Befehl ausführen

vue create <appname>

Jetzt erscheint im Terminal ein Assistent zur Erstellung der Vue-App. Im ersten Dialog sollte Manually select features ausgewählt werden. Im nächsten Schritt werden dann die Features ausgewählt. Hier sollten folgende Features gewählt werden:

  • Babel
  • Router
  • Vuex
  • Linter / Formatter

Nach dem bestätigen wird gefragt, ob der History-Modus des Router verwendet werden soll. Hier mit Y antworten.

Danach wird der Linter gewählt. Hier reicht die Standardeinstellung ESLint with error prevention only Die Folgdenen Abfragen können einfach mit Enter bestätigt werden (Standardeinstellung verwenden) bis zur Wahl des Paketmanagers. Hier sollte Use NPM gewählt werden. Jetzt wird die App mit einem Standard-Template erstellt.

Das Projekt hat jetzt folgende Ordnerstruktur:

Ordnerstruktur zum Start

Erklärung zu den Ordnern und Dateien:

  • node_modules: Ordner, in dem alle Abhängigkeiten der Anwendung gespeichert werden
  • public: Ordner mit Dateien, die beim Kompalieren der App 1:1 in das Ausgabeverzeichnis kopiert werden.
  • src
    • api: In diesem Ordner kommt die Funktionalität zur Kommunikation mit API's
    • assets: statischer Content, z.B. Bilder
    • components: VueJS-Komponenten
    • router: Konfiguration von Vue-Router
    • store: Konfiguration und Funktionalität von Vuex
    • view: Einzele Seiten der Vue-App
    • App.vue: Root-Komponente der Vue-App
    • main.js: Einstiegspunkt der ganzen Anwendung
  • .browserlistrc: Konfiguration, für welche Browser die App kompatibel sein soll (https://github.com/browserslist/browserslist)[https://github.com/browserslist/browserslist]
  • .eslintrc.js: Konfiguration von ESLint (Tool zum Anzeigen von Fehlern und Warnings in der IDE oder Konsole)
  • .gitignore: Konfiguration für Git, welche Dateien/Ordner ignoriert werden soll
  • babel.config.js: Konfiguration von Babel
  • package-lock.json: Wird automatisch dfurch den Befehl npm-install generiert
  • package.json: Konfiguration der Anwendung (Abhängigkeiten, Skripte, etc.)