Het is handig om voor de workshop alvast de volgende software op je laptop te installeren:

• Node.js
  Losse Javascript engine
• Node Package Manager (npm)
  Build tool
• TypeScript
  Een superset van Javascript met types
• Vue CLI
  Commandline tool voor Vue projecten
• Visual Studio Code
  Web development IDE
• Vue devtools browser plugin
  Debugger voor Vue applicaties
• Testproject Clone het project van GitHub, installeer libraries en start devserver.

Hieronder staan gedetailleerde instructies.

Verder kun je je hier vast een beetje inlezen:

• Vue introductie

Als je de Vue introductie gezien hebt, kan dit misschien ook interessant zijn:

• TypeScript in 5 minutes
• Vuex intro tutorial (video)

Node.js is de V8 Javascript engine (van Chrome) zonder de browser erbij. Je hebt Node.js nodig om Javascript tools zoals npm en vue-cli te draaien.

Download en installeer de nieuwste (LTS) versie.

Snelle installatie:

sudo apt-get install nodejs

Dit installeert een wat oudere LTS (long-term support) versie van Node.js. Als je de nieuwste versie wilt installeren, moet je eerst de juiste apt source toevoegen.

npm is de Node Package Manager, een tool die libraries voor je downloadt en je project bouwt. (Java devs: het is dus vergelijkbaar met Maven).

Node.js installeert automatisch een versie van npm, maar dit kan een oudere versie zijn. Het is verstandig om npm te updaten voor je aan de slag gaat.

[sudo] npm install -g npm@latest

-g staat voor globally. Zonder deze optie wordt het pakket in je projectdirectory geïnstalleerd. Dat is wat je wilt voor libraries, maar niet voor algemene tools zoals npm.

TypeScript is een superset van Javascript met optionele typing. De TypeScript compiler compileert je code naar gewone Javascript. Het voordeel van optionele typing is dat je code robuuster is en je features zoals refactoring kunt gebruiken.

[sudo] npm install -g typescript

vue-cli (Vue command-line interface) maakt het eenvoudig om een Vue project op te zetten.

[sudo] npm install -g @vue/cli @vue/cli-init

Visual Studio Code is een open source IDE van Microsoft die met name erg geschikt is voor web development. TypeScript wordt (uiteraard) out of the box ondersteund. Het user interface lijkt veel op dat van bijv. Sublime Text, Atom en IntelliJ IDEA.

Download en installeer VS Code.

Het Vue VS Code Extensions pack is een verzameling plugins die het werken met Vue prettiger maken, met syntax highlighting, slimme autocomplete, etc.

Start VS Code, ga naar Extensions (vijfde icon van boven aan de linkerkant), zoek naar "Vue VS Code Extension pack" en installeer het. Klik daarna op Reload om de plugins te activeren.

Deze plugin maakt het heel eenvoudig en prettig om Vue-applicaties te debuggen.

• Firefox
• Chrome

Clone het project van GitHub, via bijv. TortoiseGit of via de commandline:

git clone https://github.com/INL/vue-workshop

Installeer de benodigde libraries:

npm install

Start de development server:

npm run serve

Je kunt het project nu testen en debuggen op http://localhost:8080/ .