feat: ajout du lecteur de chapitres avec gestion des pages, des modes de lecture et des paramètres de zoom
This commit is contained in:
parent
bf8ca79290
commit
85abca7906
@@ -1,10 +1,38 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
globs: *.vue,*.js
|
||||
alwaysApply: false
|
||||
---
|
||||
# Architecture Frontend Vue.js
|
||||
|
||||
## Introduction
|
||||
En tant que développeur front-end expérimenté spécialisé en Vue.js, vous devez suivre les meilleures pratiques et standards de développement établis pour ce projet. Votre expertise en Vue.js, TypeScript, et votre maîtrise des patterns de conception modernes sont essentiels pour maintenir une base de code cohérente et maintenable.
|
||||
|
||||
## Stack Technique
|
||||
- **Framework Principal**: Vue.js 3.x avec Composition API
|
||||
- **Store Management**: Pinia 3.x
|
||||
- **Routage**: Vue Router 4.x
|
||||
- **Styling**:
|
||||
- TailwindCSS 4.x pour les utilitaires CSS
|
||||
- HeadlessUI pour les composants accessibles
|
||||
- Heroicons pour l'iconographie
|
||||
- **Build Tool**: Vite
|
||||
- **Testing**: Vitest avec Vue Test Utils
|
||||
- **Linting & Formatting**:
|
||||
- ESLint avec la configuration Vue.js
|
||||
- Prettier pour le formatage
|
||||
|
||||
## Conventions de Nommage
|
||||
- **Composants**: PascalCase (ex: `MangaCard.vue`, `SearchBar.vue`)
|
||||
- **Fichiers**:
|
||||
- Composants: PascalCase avec extension .vue
|
||||
- Utilitaires: camelCase avec extension .js/.ts
|
||||
- Tests: PascalCase.spec.ts
|
||||
- **Props**: camelCase dans le template, PascalCase dans le script
|
||||
- **Events**: kebab-case dans le template, camelCase dans le script
|
||||
- **Stores**: camelCase avec suffixe "Store" (ex: `mangaStore.js`)
|
||||
- **Composables**: camelCase avec préfixe "use" (ex: `useSearch.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.
|
||||
|
||||
Reference in New Issue
Block a user