Vue.js

Overzicht

Vue.js is een progressief JavaScript-framework voor het bouwen van gebruikersinterfaces. Het is ontworpen om incrementeel adopteerbaar te zijn en richt zich op de view-laag, waardoor het gemakkelijk te integreren is met andere bibliotheken of bestaande projecten.

Snelstart

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Lokale ontwikkeling met Docker

Als je geen Node.js lokaal hebt geïnstalleerd, kun je Docker gebruiken om Vue-commando's uit te voeren. Het project bevat een Dockerfile voor productiebuilds met nginx.

Vereisten

Installeer Docker Desktop voor jouw besturingssysteem (Windows, Mac of Linux).

Commando's uitvoeren met Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Projectstructuur

Begrijpen waar bestanden zich bevinden:

├── src/
│   ├── assets/               # Statische assets (afbeeldingen, fonts)
│   ├── components/           # Vue-componenten
│   ├── views/                # Paginacomponenten
│   ├── router/               # Vue Router-configuratie
│   ├── stores/               # Pinia-stores
│   ├── App.vue               # Hoofdcomponent
│   └── main.js               # Applicatie-startpunt
├── public/                   # Publieke statische bestanden
├── index.html                # HTML-startpunt
├── vite.config.js            # Vite-configuratie
├── package.json              # Afhankelijkheden en scripts
└── Dockerfile                # Docker build-configuratie
        

Veelvoorkomende taken

Een component aanmaken

Maak .vue-bestanden in src/components/:

<!-- src/components/Button.vue -->
<script setup>
defineProps({
  label: String
});

const emit = defineEmits(['click']);
</script>

<template>
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

Een route toevoegen

Bewerk src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Pinia-store gebruiken

Maak een store in src/stores/:

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
});

Tailwind CSS gebruiken

Tailwind CSS 4 is vooraf geconfigureerd. Gebruik klassen direct in je templates:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Handige commando's

Probleemoplossing

Implementatie-workflow

Elke keer dat je code naar Git pusht, wordt je applicatie automatisch gebouwd en geïmplementeerd:

De URL van je geïmplementeerde applicatie volgt dit formaat:

https://<your-subdomain>-<repo-name>.<session-domain>

Voorbeeld: https://student01-module-a.demo.nstrim.app