Vue.js

Oversigt

Vue.js er et progressivt JavaScript-framework til at bygge brugergrænseflader. Det er designet til at kunne adopteres trinvist og fokuserer på view-laget, hvilket gør det nemt at integrere med andre biblioteker eller eksisterende projekter.

Kom godt i gang

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

Lokal udvikling med Docker

Hvis du ikke har Node.js installeret lokalt, kan du bruge Docker til at køre Vue-kommandoer. Projektet indeholder en Dockerfile til produktions-builds med nginx.

Forudsætninger

Installer Docker Desktop til dit operativsystem (Windows, Mac eller Linux).

Kør kommandoer med 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

Projektstruktur

Forstå hvor filerne er placeret:

├── src/
│   ├── assets/               # Statiske assets (billeder, fonts)
│   ├── components/           # Vue-komponenter
│   ├── views/                # Side-komponenter
│   ├── router/               # Vue Router-konfiguration
│   ├── stores/               # Pinia-stores
│   ├── App.vue               # Rod-komponent
│   └── main.js               # Applikationens entry point
├── public/                   # Offentlige statiske filer
├── index.html                # HTML entry point
├── vite.config.js            # Vite-konfiguration
├── package.json              # Afhængigheder og scripts
└── Dockerfile                # Docker build-konfiguration
        

Almindelige opgaver

Opret en komponent

Opret .vue-filer i 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>

Tilføj en rute

Rediger 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;

Brug af Pinia store

Opret en store i 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-- }
  }
});

Brug af Tailwind CSS

Tailwind CSS 4 er forudkonfigureret. Brug klasserne direkte i dine skabeloner:

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

Nyttige kommandoer

Fejlfinding

Udrulnings-workflow

Hver gang du pusher kode til Git, bygges og udrulles din applikation automatisk:

Din udrullede applikations-URL har dette format:

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

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