2. Een werkomgeving opzetten

We gebruiken de werkomgeving die in het document [2] wordt beschreven:

Visual Studio Code (VSCode) om de codes JavaScript te schrijven;
[node.js] om deze uit te voeren;
[npm] om de bibliotheken JavaScript te downloaden en te installeren die we nodig hebben;

We maken een werkomgeving aan in [VSCode]:

in [1-5] openen we een lege map [vuejs] in [VSCode];

in [8-10] installeren we de afhankelijkheid [@vue/cli], waarmee we een project [vue.js] kunnen initialiseren. Deze afhankelijkheid brengt een groot aantal pakketten (enkele honderden) met zich mee;

In dezelfde terminal typen we vervolgens het commando [vue create .], waarmee we vragen om een project [vue.js] aan te maken in de huidige map (.) :

in [13], waarna een reeks vragen volgt om het project te configureren;

zodra alle vragen zijn beantwoord, worden er nieuwe pakketten gedownload en wordt er een project gegenereerd in de huidige map: [14].

Laten we eens kijken wat er is gegenereerd. Het bestand [package.json] ziet er als volgt uit:


{
  "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"
  ]
}

Opmerkingen

regels 14-22: in de afhankelijkheden die nodig zijn voor de ontwikkeling zien we verwijzingen naar de twee tools [eslint, babel] die al in de twee voorgaande hoofdstukken zijn gebruikt. Daarbij komen nog plug-ins van deze twee tools die bedoeld zijn voor gebruik binnen [vue.js];
regel 34: het pakket [babel-eslint] zal de transpilatie ES6 -> ES5 van de codes jS uitvoeren;
regels 5-9: er zijn drie taken [npm] aangemaakt:
- [build]: dient om de gecompileerde versie van het project te bouwen die klaar is voor productie;
- [serve]: voert het project uit op een webserver. Met deze tool worden de tests tijdens de ontwikkeling uitgevoerd. Net als bij [webpack-dev-server] leidt een wijziging in de broncode van het project automatisch tot het opnieuw compileren van het project en het opnieuw laden ervan door de webserver;
- [lint]: wordt gebruikt om de codes van jS te analyseren en rapporten te genereren. We zullen deze tool hier niet gebruiken;

Er is een [README.md]-bestand gegenereerd met de volgende inhoud:

# vuejs

## Projectconfiguratie
```
npm install
```

### Compileert en voert hot-reloads uit voor ontwikkeling
```
npm run serve
```

### Compileren en minimaliseren voor productie
```
npm run build
```

### Voer je tests uit
```
npm run test
```

### Bestanden controleren en corrigeren
```
npm run lint
```

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

Dit bestand geeft een overzicht van de commando’s die moeten worden gebruikt om het project te beheren.

We weten dat in [VSCode] de taken [npm] worden voorgesteld om uit te voeren:

in [1-3] voeren we de opdracht [serve] uit, die het project [4-5] zal compileren en vervolgens uitvoeren;

Bij URL [http://localhost:8080] krijgen we de volgende pagina:

We zullen verderop uitleggen hoe we aan deze pagina zijn gekomen.

Laten we doorgaan met het configureren van onze werkomgeving:

In [2] hierboven zien we indicatoren [git]. [git] is een broncodebeheerder waarmee opeenvolgende versies van de broncode kunnen worden beheerd en gedeeld tussen ontwikkelaars. We gaan deze tool voor het project uitschakelen;
in [3-5] gaan we naar de projecteigenschappen;

in [9-10] schakelen we het gebruik van [git] in het project uit;

We gaan verschillende tests schrijven om de werking van [vue.js] te demonstreren. We willen echter niet telkens een nieuw project aanmaken, omdat we dan elke keer een map [node_modules] zouden moeten genereren, terwijl deze enkele honderden megabytes groot is. Laten we teruggaan naar de taken [npm] in het bestand [package.json]:


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

regel 2: het commando [serve] gebruikt standaard:
- het bestand [public/index.html];
- gekoppeld aan het bestand [src/main.js];

Op regel 2 is het mogelijk om bij de opdracht [serve] het startpunt van het project op te geven, bijvoorbeeld:


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

Laten we het eens proberen:

in [1] is de map [src] hernoemd naar [vuejs-00];
bij [2-3] is de opdracht [serve] gewijzigd;
in [4-6] wordt het project uitgevoerd;

Het resultaat is hetzelfde als eerder:

Voor onze tests gaan we dus als volgt te werk:

code schrijven in een map [vuejs-xx] van het project;
test van dit project met het commando [vue-cli-service serve vuejs-xx/main.js] in het bestand [package.json];

Wanneer de ontwikkelingsserver wordt gestart, leidt elke wijziging in een van de projectbestanden tot een hercompilatie. Om deze reden schakelen we de modus [Auto Save] van [VSCode] uit. We willen namelijk niet dat er een hercompilatie plaatsvindt zodra er tekens in een van de projectbestanden worden ingevoerd. We willen alleen op bepaalde momenten dat er opnieuw wordt gecompileerd:

in [2] mag de optie [Auto Save] niet zijn aangevinkt;