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:
Als je de Vue introductie gezien hebt, kan dit misschien ook interessant zijn:
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
-gstaat 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.
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/ .