Twee Scenario's

Er zijn twee situaties waarin je met Vue projecten werkt:

  • Bestaand project opstarten - project gecloned of gedownload
  • Nieuw project aanmaken - compleet nieuw Vue project

Bestaand Project Opstarten

Wanneer je een bestaand Vue project hebt (bijvoorbeeld een opdracht die je hebt gecloned), moet je eerst de dependencies installeren.

Stap 1: Navigeer naar project folder

Open terminal in VSCode en ga naar de juiste folder:

# Voorbeeld: navigeer naar opdracht folder
cd opdracht-01-books

Stap 2: Dependencies installeren

Installeer alle benodigde packages. Dit maakt de node_modules folder aan:

npm install

Belangrijk: Zonder npm install werkt het project niet! Je hebt de node_modules folder nodig.

Stap 3: Development server starten

Start het project:

npm run dev

Je terminal laat dit zien:

VITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Open http://localhost:5173/ in je browser!

Complete Workflow

# 1. Navigeer naar project folder
cd opdracht-01-books

# 2. Installeer dependencies (alleen eerste keer)
npm install

# 3. Start development server
npm run dev

# Server stoppen: Ctrl+C

Samenvatting:

  1. cd naar project folder
  2. npm install (alleen eerste keer)
  3. npm run dev (elke keer)

Nieuw Project Aanmaken

Wanneer gebruik je dit?

Deze instructies zijn voor wanneer je zelf een nieuw Vue project moet aanmaken. Voor de meeste opdrachten staat het project al klaar.

Stap 1: Repository Aanmaken en Clonen

Repository Aanmaken:

  • Maak in GitHub (of GitLab) een public repository aan
  • Geef de repository de naam van je project

Repository Clonen:

  • Clone de repository met GitHub Desktop
  • Open de repository folder in VSCode
  • Je gaat nu een Vue project maken IN deze folder

Stap 2: Nieuw Vue Project Maken

Open terminal in VSCode en type:

npm create vue@latest

Let op: Vue heeft een eigen scaffolding tool — gebruik npm create vue@latest, niet npm create vite@latest. Vue's tool zet Vite ook op, maar dan met de juiste Vue-configuratie.

Doorloop alle stappen:

  • Project naam: Type een punt (.) om het project in de huidige folder te maken
  • TypeScript? Kies No (voor nu — we gebruiken JavaScript)
  • JSX? Kies No (Vue gebruikt templates, geen JSX)
  • Vue Router? Kies Yes als je meerdere pagina's nodig hebt, anders No
  • Pinia? Kies Yes voor state management, anders No
  • Vitest / E2E / ESLint: Voor nu No bij alles

Voorbeeld in terminal:

✔ Project name: … .
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No

Scaffolding project in /current-directory...

Done. Now run:

  npm install
  npm run dev

Stap 3: Project Installeren en Starten

1. Dependencies Installeren:

npm install

npm install zorgt ervoor dat de node_modules folder wordt geïnstalleerd. Zonder deze folder werkt het niet!

2. Development Server Starten:

npm run dev

Met npm run dev start je het project. Elke keer als je gaat beginnen met Vue, type je npm run dev.

Je terminal laat dit zien:

VITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Open http://localhost:5173/ in je browser!

Stap 4: Mappenstructuur

Na installatie heb je deze structuur:

my-repository/
├── node_modules/     ← Nooit verwijderen!
├── public/           ← Images, favicons, fonts
├── src/              ← Hier ga je werken!
│   ├── components/   ← Eigen components komen hier
│   ├── App.vue       ← Hoofd-component
│   ├── main.js       ← App startpunt
│   └── assets/
├── index.html
├── package.json
├── vite.config.js
└── README.md

Belangrijke Folders:

node_modules: Nooit verwijderen! Library met handige tools.

public: Images, favicons en fonts komen hier.

src: Belangrijkste folder, hier ga je werken. Bevat al je Vue componenten (.vue bestanden).

VSCode Extensie: Installeer Vue - Official (voorheen Volar) voor Vue 3 syntax highlighting en autocomplete. Schakel de oude Vetur extensie uit als je die nog hebt — die was voor Vue 2.

Troubleshooting

Server start niet?

  • Check of je in de juiste folder zit (moet package.json bevatten)
  • Run npm install opnieuw
  • Check of poort 5173 vrij is

Module not found errors?

  • Run npm install opnieuw
  • Check of node_modules folder bestaat
  • Restart VSCode

Port already in use?

  • Stop andere Vue projecten (Ctrl+C)
  • Of gebruik andere poort: npm run dev -- --port 3000

"Cannot find module 'vue'"?

  • Run npm install vue@latest
  • Of installeer alle dependencies opnieuw: verwijder node_modules en run npm install

Quick Reference

# Bestaand project opstarten
cd opdracht-01-books
npm install
npm run dev

# Nieuw project aanmaken
npm create vue@latest
# Type: . (punt)
# TypeScript: No
# JSX: No
# Router/Pinia: kies wat je nodig hebt
npm install
npm run dev

# Server stoppen
Ctrl+C

Handy Tips:

  • Terminal altijd open houden tijdens development
  • Ctrl+C om development server te stoppen
  • npm run dev om server opnieuw te starten
  • Browser refresht automatisch bij code wijzigingen (Hot Module Replacement)
  • package.json bevat alle project info en dependencies
  • Installeer Vue - Official in VSCode voor de beste ervaring