vue-dsfr-project

Ce gabarit possède tous les outils configurés pour développer un projets Vue 3 et VueDsfr avec Vite.

Configuration recommandée

• Visual Studio Code avec ces extensions :
  • VSCode
  • Volar (and disable Vetur)
  • TypeScript Vue Plugin (Volar)
  • ESLint
  • Prettier
  • Vue Ecosystem Snippets

Support de TypeScript pour les fichiers .vue

TypeScript ne sait pas gérer les informations de type pour les imports dans les fichiers .vue par défault, donc la CLI tsc est remplacée par vue-tsc pour la vérification des types. Dans les éditeurs, il est besoin de l’extension TypeScript Vue Plugin (Volar) pour rendre le service du langage TypeScript capable de gérer les types des fichiers .vue.

Si le plugin TypeScript ne vous semble pas assez performant, Volar a aussi implémenté un mode Take Over qui est plus performant. Vous pouvez l’activer en suivant les étapes suivantes :

1. Désactiver l’extension TypeScript incluse
   1. Lancer Extensions: Show Built-in Extensions depuis la palette de commandes VSCode
   2. Trouver TypeScript and JavaScript Language Features, cliquer avec le bouton droit et sélectionner Disable (Workspace)
2. Recharger la fenêtre VSCode en lançant Developer: Reload Window depuis la palette de commandes.

Installer les dépendances

npm install

Compilation et Hot-Reload pour le développement

npm run dev

Vérification des types, Compilation et Minification pour la Production

npm run build

Voir l'application avec le code de production

npm run preview

Déployer le code de production

Déployer le contenu du dossier dist après avoir généré le code de production.

Vérifier la syntaxe et le formattage avec ESLint

npm run lint

Lancer les Tests Unitaires avec Vitest

npm run test:unit

Lancer les Tests End-to-End Tests avec Playwright

npm run test:e2e:dev

Analyse statique du code avec ESLint

npm run lint