2. Einrichtung einer Arbeitsumgebung

Wir greifen auf die im Dokument [2] beschriebene Arbeitsumgebung zurück:

Visual Studio Code (VSCode) zum Schreiben der Codes JavaScript;
[node.js], um diese auszuführen;
[npm] zum Herunterladen und Installieren der benötigten Bibliotheken JavaScript;

Wir erstellen eine Arbeitsumgebung in [VSCode]:

In [1-5] öffnen wir einen leeren Ordner [vuejs] in [VSCode];

in [8-10] installieren wir die Abhängigkeit [@vue/cli], die es uns ermöglicht, ein Projekt [vue.js] zu initialisieren. Diese Abhängigkeit bringt eine große Anzahl von Paketen (mehrere Hundert) mit sich;

Im selben Terminal geben wir anschließend den Befehl [vue create .] ein, der die Erstellung eines Projekts [vue.js] im aktuellen Verzeichnis (.) anfordert:

In [13] beginnt eine Reihe von Fragen, die der Konfiguration des Projekts dienen;

Sobald alle Fragen beantwortet sind, werden neue Pakete heruntergeladen und ein Projekt im aktuellen Verzeichnis unter dem Namen [14] erstellt.

Schauen wir uns an, was generiert wurde. Die Datei [package.json] sieht wie folgt aus:


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Kommentare

Zeilen 14–22: In den für die Entwicklung erforderlichen Abhängigkeiten finden sich Verweise auf die beiden Tools „[eslint, babel]“, die bereits in den beiden vorangegangenen Kapiteln verwendet wurden. Hinzu kommen Plugins dieser beiden Tools, die für den Einsatz innerhalb von „[vue.js]“ vorgesehen sind;
Zeile 34: Das Paket [babel-eslint] führt die Transpilation von ES6 nach ES5 für den Code jS durch;
Zeilen 5–9: Es wurden drei Aufgaben mit der Bezeichnung [npm] erstellt:
- [build]: dient dazu, die kompilierte Version des Projekts zu erstellen, die für den Produktivbetrieb bereit ist;
- [serve]: Führt das Projekt auf einem Webserver aus. Mit diesem Tool werden die Tests während der Entwicklung durchgeführt. Wie bei [webpack-dev-server] führt eine Änderung am Quellcode des Projekts automatisch zur Neukompilierung des Projekts und dessen Neuladen durch den Webserver;
- [lint]: dient zur Analyse der Codes von jS und erstellt Berichte. Dieses Tool werden wir hier nicht verwenden;

Es wurde eine Datei [README.md] mit folgendem Inhalt generiert:

# Vue.js

## Projekteinrichtung
```
npm install
```

### Kompiliert und führt Hot-Reloads für die Entwicklung durch
```
npm run serve
```

### Kompilieren und Minimieren für die Produktion
```
npm run build
```

### Tests ausführen
```
npm run test
```

### Dateien prüfen und korrigieren
```
npm run lint
```

### Konfiguration anpassen
See [Configuration Reference](https://cli.vuejs.org/config/).

Diese Datei fasst die Befehle zusammen, die zur Verwaltung des Projekts verwendet werden müssen.

Wir wissen, dass in [VSCode] die Aufgaben [npm] zur Ausführung vorgeschlagen werden:

In [1-3] führen wir den Befehl [serve] aus, der das Projekt [4-5] kompiliert und anschließend ausführt;

Bei URL und [http://localhost:8080] erhalten wir die folgende Seite:

Wir werden etwas später erläutern, wie es zu dieser Seite gekommen ist.

Fahren wir mit der Konfiguration unserer Arbeitsumgebung fort:

Im oben genannten [2] sehen wir die Indikatoren [git]. [git] ist ein Quellcode-Manager, mit dem aufeinanderfolgende Versionen des Quellcodes verwaltet und zwischen Entwicklern ausgetauscht werden können. Wir werden dieses Tool für das Projekt deaktivieren;
In [3-5] rufen wir die Projekteigenschaften auf;

In [9-10] deaktivieren wir die Verwendung von [git] im Projekt;

Wir werden verschiedene Tests schreiben, um die Funktionsweise von [vue.js] zu veranschaulichen. Wir möchten jedoch nicht jedes Mal ein neues Projekt erstellen, da dann jedes Mal ein Ordner „[node_modules]“ generiert werden müsste, der mehrere hundert Megabyte groß ist. Kehren wir zu den Aufgaben „[npm]“ der Datei „[package.json]“ zurück:


  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

Zeile 2: Der Befehl [serve] verwendet standardmäßig:
- die Datei [public/index.html];
- die mit der Datei [src/main.js] verknüpft ist;

In Zeile 2 kann beim Befehl [serve] der Einstiegspunkt des Projekts angegeben werden, zum Beispiel:


"serve": "vue-cli-service serve vuejs-00/main.js",

Probieren wir es aus:

In [1] wurde der Ordner [src] in [vuejs-00] umbenannt;
Bei [2-3] wurde der Befehl [serve] geändert;
In [4-6] wird das Projekt ausgeführt;

Man erhält das gleiche Ergebnis wie zuvor:

Für unsere Tests gehen wir daher wie folgt vor:

Code in einen Ordner [vuejs-xx] des Projekts schreiben;
Test dieses Projekts mit dem Befehl [vue-cli-service serve vuejs-xx/main.js] in der Datei [package.json];

Wenn der Entwicklungsserver gestartet ist, führt jede Änderung an einer der Projektdateien zu einer Neukompilierung. Aus diesem Grund deaktivieren wir den Modus [Auto Save] von [VSCode]. Wir möchten nämlich nicht, dass es zu einer Neukompilierung kommt, sobald Zeichen in eine der Projektdateien eingegeben werden. Eine Neukompilierung soll nur zu bestimmten Zeitpunkten erfolgen:

In [2] darf die Option [Auto Save] nicht aktiviert sein;