vue-template

Template développé avec :

• Vue.js 3.+ (Composition API, syntaxe script setup)
• Vue Router : système de routeur de Vue.js
• TypeScript
• Vite : outil de build
• Vitest et vue-test-utils : tests unitaires
• pnpm : gestionnaire de dépendances
• Prettier : formattage de code
• ESLint : linter
• Sass : préprocesseur CSS
• PrimeVue : librairie de composants
• PrimeFlex : librairie utilitaire CSS
• VeeValidate : validation des formulaires
• axios : client HTTP
• Font Awesome : librairie d'icônes
• PrimeIcons : librairie d'icônes
• date-fns : librairie utilitaire pour les dates
• keycloak-js : adapteur pour Keycloak
• Cypress : tests End-to-End

Environnement de développement recommandé

IDE :

VSCode

Extensions :

• Volar (désactiver Vetur si activé) + TypeScript Vue Plugin (Volar).
• ESLint
• GitLens
• Prettier
• Vitest
• Vue VSCode Snippets

Configuration de Vite

Vite Configuration Reference.

Commandes utiles

Installation du projet

pnpm install

Compiler le projet et lancer le serveur de développement

pnpm dev

Vérification des types, compilation et minification pour la mise en production

pnpm build

Lancer les tests unitaires avec Vitest

pnpm test:unit
pnpm test:unit:ci # pour avoir le coverage

Lancer les tests End-to-End avec Cypress

pnpm build
pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing

Lancer un scan du linter ESLint

pnpm lint

Lancer une vérification des types TypeScript

pnpm typecheck

Utilisation de VueUse

VueUse propose des centaines de fonctions utilitaires : https://vueuse.org.
Vous pouvez l'installer comme ceci si besoin :

pnpm i @vueuse/core

Mise à jour de PrimeVue

Après chaque mise à jour de PrimeVue, il est nécessaire d'écraser les deux thèmes situés dans public/themes/.../theme.css par ceux présent dans le dossier node_modules/primevue/resources/themes/.../theme.css. Nous sommes obligés de figer les thèmes pour gérer le thème clair et le thème sombre avec le système actuel.