Vue.js

Översikt

Vue.js är ett progressivt JavaScript-ramverk för att bygga användargränssnitt. Det är utformat för att kunna införas stegvis och fokuserar på vy-lagret, vilket gör det enkelt att integrera med andra bibliotek eller befintliga projekt.

Kom igång

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 utveckling med Docker

Om du inte har Node.js installerat lokalt kan du använda Docker för att köra Vue-kommandon. Projektet innehåller en Dockerfile för produktionsbyggen med nginx.

Förutsättningar

Installera Docker Desktop för ditt operativsystem (Windows, Mac eller Linux).

Köra kommandon 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

Förstå var filerna finns:

├── src/
│   ├── assets/               # Statiska tillgångar (bilder, typsnitt)
│   ├── components/           # Vue-komponenter
│   ├── views/                # Sidkomponenter
│   ├── router/               # Vue Router-konfiguration
│   ├── stores/               # Pinia-stores
│   ├── App.vue               # Rotkomponent
│   └── main.js               # Applikationens ingångspunkt
├── public/                   # Publika statiska filer
├── index.html                # HTML-ingångspunkt
├── vite.config.js            # Vite-konfiguration
├── package.json              # Beroenden och skript
└── Dockerfile                # Docker-byggkonfiguration
        

Vanliga uppgifter

Skapa en komponent

Skapa .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>

Lägga till en rutt

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

Använda Pinia-store

Skapa 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-- }
  }
});

Använda Tailwind CSS

Tailwind CSS 4 är förkonfigurerat. Använd klasser direkt i dina mallar:

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

Användbara kommandon

Felsökning

Distributionsflöde

Varje gång du pushar kod till Git byggs och distribueras din applikation automatiskt:

Din distribuerade applikations-URL följer detta format:

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

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