Vue.js

Aperçu

Vue.js est un framework JavaScript progressif pour créer des interfaces utilisateur. Il est conçu pour être adoptable de manière incrémentale et se concentre sur la couche vue, ce qui facilite son intégration avec d'autres bibliothèques ou projets existants.

Démarrage rapide

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

Développement local avec Docker

Si vous n'avez pas Node.js installé localement, vous pouvez utiliser Docker pour exécuter les commandes Vue. Le projet inclut un Dockerfile pour les builds de production avec nginx.

Prérequis

Installez Docker Desktop pour votre système d'exploitation (Windows, Mac ou Linux).

Exécuter des commandes avec Docker

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

# Exécuter le serveur de développement (accessible sur localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

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

Structure du projet

Comprendre où sont situés les fichiers :

├── src/
│   ├── assets/               # Ressources statiques (images, polices)
│   ├── components/           # Composants Vue
│   ├── views/                # Composants de page
│   ├── router/               # Configuration de Vue Router
│   ├── stores/               # Stores Pinia
│   ├── App.vue               # Composant racine
│   └── main.js               # Point d'entrée de l'application
├── public/                   # Fichiers statiques publics
├── index.html                # Point d'entrée HTML
├── vite.config.js            # Configuration Vite
├── package.json              # Dépendances et scripts
└── Dockerfile                # Configuration de build Docker
        

Tâches courantes

Créer un composant

Créez des fichiers .vue dans 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>

Ajouter une route

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

Utiliser un store Pinia

Créez un store dans 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-- }
  }
});

Utiliser Tailwind CSS

Tailwind CSS 4 est préconfiguré. Utilisez les classes directement dans vos templates :

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

Commandes utiles

Dépannage

Flux de déploiement

Chaque fois que vous poussez du code vers Git, votre application est automatiquement construite et déployée :

L'URL de votre application déployée suit ce format :

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

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