feat: debut d'un front vue.js + ajout de cursorrules
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
ca9a74fe69
commit
bee8572dc5
155
.cursor/rules/front_vue.mdc
Normal file
155
.cursor/rules/front_vue.mdc
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Architecture Frontend Vue.js
|
||||
|
||||
## Structure Générale
|
||||
L'application Vue.js suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code est organisé en domaines distincts dans le dossier `assets/vue/`.
|
||||
Pour ce qui est du style, on utilise TailwindCss, Headlessui et Heroicons.
|
||||
|
||||
```
|
||||
assets/vue/
|
||||
├── app/
|
||||
│ ├── shared/ # Code partagé entre les domaines
|
||||
│ │ ├── components/ # Composants réutilisables
|
||||
│ │ │ ├── ui/ # Composants UI génériques (boutons, inputs, etc.)
|
||||
│ │ │ └── layout/ # Layouts réutilisables
|
||||
│ │ ├── composables/ # Composables Vue partagés
|
||||
│ │ ├── plugins/ # Plugins Vue (router, pinia, etc.)
|
||||
│ │ └── utils/ # Utilitaires partagés
|
||||
│ │
|
||||
│ ├── domain/ # Domaines métier
|
||||
│ │ ├── manga/ # Domaine Manga
|
||||
│ │ │ ├── application/ # Cas d'utilisation
|
||||
│ │ │ │ ├── commands/ # Commands & CommandHandlers
|
||||
│ │ │ │ ├── queries/ # Queries & QueryHandlers
|
||||
│ │ │ │ └── store/ # Store Pinia du domaine
|
||||
│ │ │ ├── domain/ # Cœur métier
|
||||
│ │ │ │ ├── entities/ # Entités
|
||||
│ │ │ │ ├── value-objects/# Objets valeur
|
||||
│ │ │ │ └── services/ # Services métier
|
||||
│ │ │ ├── infrastructure/ # Adaptateurs
|
||||
│ │ │ │ ├── api/ # Client API
|
||||
│ │ │ │ └── repository/ # Implémentation repository
|
||||
│ │ │ └── presentation/ # Interface utilisateur
|
||||
│ │ │ ├── components/ # Composants spécifiques au domaine
|
||||
│ │ │ ├── composables/ # Composables spécifiques
|
||||
│ │ │ └── pages/ # Pages du domaine
|
||||
│ │ │
|
||||
│ │ ├── reader/ # Domaine Reader (même structure)
|
||||
│ │ └── scraping/ # Domaine Scraping (même structure)
|
||||
│ │
|
||||
│ └── router/ # Configuration du routeur
|
||||
│ └── index.js # Point d'entrée du routeur
|
||||
```
|
||||
|
||||
## Contrat d'API
|
||||
Le contrat d'API complet est disponible dans le fichier [api-docs.json](mdc:public/api-docs.json). Ce fichier contient la documentation OpenAPI de toutes les routes disponibles et leurs schémas.
|
||||
|
||||
## Règles d'Architecture
|
||||
|
||||
### 1. Règles Générales
|
||||
- Chaque domaine est isolé et ne dépend que de lui-même et du domaine `shared`
|
||||
- Les dépendances externes sont gérées via les adaptateurs dans l'infrastructure
|
||||
- L'application est une SPA (Single Page Application) sans rechargement de page
|
||||
- Utilisation de Vue Router pour la navigation côté client
|
||||
- Gestion d'état avec Pinia organisée par domaine
|
||||
|
||||
### 2. Couche Domain
|
||||
- Contient les entités et la logique métier pure
|
||||
- Ne dépend d'aucune bibliothèque externe sauf Vue.js
|
||||
- Les entités sont des classes JavaScript standard
|
||||
- Exemple :
|
||||
```javascript
|
||||
export class Manga {
|
||||
constructor({ id, title, description = null }) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
static create(data) {
|
||||
return new Manga(data);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Couche Application
|
||||
- Gère les cas d'utilisation via les stores Pinia
|
||||
- Coordonne les interactions entre l'UI et le domaine
|
||||
- Transforme les données du domaine pour l'UI
|
||||
- Exemple de store :
|
||||
```javascript
|
||||
export const useMangaStore = defineStore('manga', {
|
||||
state: () => ({
|
||||
mangas: [],
|
||||
loading: false,
|
||||
error: null
|
||||
}),
|
||||
actions: {
|
||||
async fetchMangas() {
|
||||
// Logique de chargement
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Couche Infrastructure
|
||||
- Gère la communication avec l'API
|
||||
- Isole les dépendances externes
|
||||
- Exemple d'API client :
|
||||
```javascript
|
||||
export class MangaApi {
|
||||
static async fetchAll() {
|
||||
const response = await fetch('/api/mangas');
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Couche Présentation
|
||||
- Composants Vue.js spécifiques au domaine
|
||||
- Utilise les composants UI partagés
|
||||
- Communique avec la couche application via les stores
|
||||
- Exemple de composant :
|
||||
```vue
|
||||
<template>
|
||||
<div class="manga-list">
|
||||
<MangaCard v-for="manga in mangas" :key="manga.id" :manga="manga" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Bonnes Pratiques
|
||||
|
||||
### 1. Composants
|
||||
- Utiliser la Composition API pour la logique
|
||||
- Séparer les composants UI génériques des composants métier
|
||||
- Favoriser les props et events pour la communication parent-enfant
|
||||
- Utiliser les stores pour la communication entre composants distants
|
||||
|
||||
### 2. État
|
||||
- Un store Pinia par domaine
|
||||
- Actions asynchrones dans les stores
|
||||
- Getters pour les données dérivées
|
||||
- État local dans les composants quand possible
|
||||
|
||||
### 3. Router
|
||||
- Routes organisées par domaine
|
||||
- Lazy loading des composants de page
|
||||
- Navigation programmatique via le router
|
||||
- Guards pour la protection des routes
|
||||
|
||||
### 4. Style
|
||||
- Utilisation de Tailwind CSS
|
||||
- Classes utilitaires pour le style
|
||||
- Composants Headless UI pour l'accessibilité
|
||||
- Design system cohérent via les composants partagés
|
||||
|
||||
## Validation
|
||||
Les règles d'architecture peuvent être validées par des outils comme :
|
||||
- ESLint pour les règles de code
|
||||
- Tests unitaires pour les composants
|
||||
- Tests d'intégration pour les stores
|
||||
Reference in New Issue
Block a user