Introduction
Se lancer dans un nouveau projet de développement logiciel peut sembler être un défi de taille, surtout lorsqu’il s’agit de choisir les bons outils pour créer une application réussie et évolutive. C’est là que Vue 3 entre en jeu. Ce framework JavaScript moderne et flexible est conçu pour offrir une expérience utilisateur fluide et réactive, tout en étant suffisamment puissant pour gérer des projets de toutes tailles. Dans ce guide, nous allons explorer comment utiliser Vue 3 pour créer une application web performante, en posant d’abord les bases essentielles pour un projet solide, avec une gestion d’état efficace et des fonctionnalités clés. Ce tutoriel a pour objectif de vous apprendre à exploiter pleinement Vue 3 pour développer des applications web qui répondent aux besoins de vos utilisateurs.
Prérequis
Assurons-nous d’avoir les éléments suivants installés et que nous travaillons dans le répertoire où nous souhaitons créer le projet :
- Vue.js 3 : Assurons-nous d’utiliser Vue.js 3 pour bénéficier des dernières fonctionnalités et améliorations.
- Node.js version 18 ou supérieure : Installons Node.js dans sa version 18 ou ultérieure pour garantir la compatibilité avec les outils modernes.
- Familiarité avec la ligne de commande : Une compréhension de base des commandes en ligne est nécessaire pour gérer l’installation et la configuration du projet.
- Yarn : Si vous n’avez pas encore installé Yarn, suivez les instructions disponibles sur le site officiel de Yarn pour l’ajouter à votre environnement de développement.
Use Case
Imaginez que vous êtes sur le point de lancer un nouveau projet Vue.js et que vous souhaitez démarrer sur de bonnes bases, avec une structure claire et efficace. Pour cela, nous allons commencer par configurer Vue.js en choisissant la version 3, afin que vous puissiez profiter de toutes les dernières améliorations. Ensuite, pour gérer l’état global de votre application, nous opterons pour Pinia, un outil fiable qui simplifie la gestion des données et permet d’intégrer facilement des fonctionnalités essentielles, comme un moteur de recherche rapide et performant. Avec cette configuration, nous nous assurerons que votre projet est prêt à évoluer en douceur, offrant une expérience utilisateur optimale tout en étant capable de gérer des fonctionnalités plus complexes à mesure que votre application grandit.
Initialisation d’un Projet Vue
- Ouvrez votre terminal et naviguons vers le répertoire dans lequel nous souhaitons créer le projet.
- Exécutez la commande suivante pour initialiser le projet Vue :
yarn global add create-vueCette commande installera globalement create-vue, l’outil officiel pour générer des projets Vue.js
create-vueCette commande nous guidera à travers les options de configuration pour créer un nouveau projet Vue. Suivons les instructions à l’écran pour choisir les fonctionnalités que nous souhaitons inclure dans votre projet.
√ Nom du projet : ... crud-category-with-pinia
√ Ajouter TypeScript ? Oui
√ Ajouter le support de JSX ? Non
√ Ajouter Vue Router pour le développement d'applications _single page_ ? Oui
√ Ajouter Pinia pour la gestion de l'état ? Non
√ Ajouter Vitest pour les tests unitaires ? Non
√ Ajouter une solution de test de bout en bout (e2e) ? » Non
√ Ajouter ESLint pour la qualité du code ? Oui
√ Ajouter Prettier pour le formatage du code ? Oui
√ Ajouter l'extension Vue DevTools 7 pour le débogage ? (expérimental) Non
Génération du projet dans ./crud-category-with-pinia...
TerminéSi vous n’êtes pas sûr d’une option lors de la configuration du projet, il suffit de choisir “Non” en appuyant sur Entrée pour l’instant.
Voici à quoi devrait ressembler l’arborescence du projet une fois qu’il a été créé :
crud-category-with-pinia/
├── node_modules/
├── public/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── router/
│ │ └── index.ts
│ ├── views/
│ │ └── HomeView.vue
│ ├── App.vue
│ ├── main.ts
│ └── styles/
│ └── main.css
├── .eslintrc.ts
├── .prettierrc
├── .gitignore
├── package.json
├── README.md
└── yarn.lockUne fois le projet créé, suivons les instructions fournies pour installer les dépendances et démarrer le serveur de développement.
cd crud-category-with-pinia
yarn install
yarn run devEn cliquant sur le lien:
http://localhost:5173/on aura le résultat ci-dessous.
Installation de Pinia
Une fois que nous avons configuré notre application Vue.js, nous allons installer Pinia pour gérer l’état de notre application en utilisant la commande suivante :
yarn add piniaNB: On pouvait ajouter Pinia lors de l’initialisation du projet.
Configurons Pinia en créant une instance et en l’ajoutant à notre application Vue.js. Pour ce faire, ouvrons le fichier main.ts et modifions-le comme suit :
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')Pourquoi utiliser Pinia ?
Pinia est une bibliothèque de gestion d’état pour Vue.js, idéale pour partager l’état entre composants dans les applications monopage. Elle offre de nombreux avantages, notamment le support des tests, l’extension via plugins, une autocomplétion TypeScript robuste, et une intégration avec Vue DevTools pour un débogage facilité. Pinia permet également le rendu côté serveur, le suivi des actions et mutations, et le remplacement à chaud des modules, tout en maintenant l’état pendant le développement.
Installation de Bootstrap
Pour rendre notre application plus élégante et facile à utiliser, nous allons intégrer Bootstrap, un framework populaire qui fournit un ensemble de styles et de composants prêts à l’emploi. Grâce à Bootstrap, nous pourrons créer des interfaces utilisateur qui s’adaptent parfaitement à différentes tailles d’écran et qui ont un aspect professionnel.
Nous allons commencer par installer Bootstrap dans notre projet Vue.js. Pour cela, vous pouvez utiliser la commande suivante :
yarn add bootstrap Pour pouvoir utiliser Bootstrap dans notre projet, nous devons l’importer correctement dans le fichier main.ts pour qu’il soit accessible dans toutes nos vues. Cela nous permettra d’utiliser rapidement les boutons, les grilles, les formulaires, et bien d’autres éléments stylisés sans avoir à tout coder nous-mêmes. Voici comment procéder pour l’intégration dans votre projet :
Importation dans main.ts : Ouvrez votre fichier main.ts et ajoutez les importations nécessaires pour Bootstrap.
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import "bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css'
const app = createApp(App)
const pinia = createPinia()
app.use(router)
app.use(pinia)
app.mount('#app')
Pour voir le projet en action, accédez à l’adresse suivante : http://localhost:5173. Gardez cette page ouverte en arrière-plan pour suivre les progrès de l’application en temps réel pendant que vous effectuez des modifications.
Conclusion
Ce tutoriel nous a guidés à travers la configuration d’un projet Vue.js en intégrant Pinia et Bootstrap. Nous avons appris à initialiser notre projet Vue 3, à configurer Pinia pour une gestion d’état efficace, et à intégrer Bootstrap pour un design réactif et attrayant. Nous avons également exploré les différentes étapes pour structurer correctement notre projet dès le départ. Avec cette configuration, nous disposons désormais d’un environnement de développement Vue.js optimisé, prêt à soutenir le développement d’applications web modernes et performantes.
Ndeye Fatou est ingénieure en cryptographie. Chaque matin, elle combine
ses connaissances en mathématiques et en informatique pour concevoir et construire des systèmes de sécurité complexes.
Elle est aussi une développeuse front-end enthousiaste et créatif avec une passion pour la création d'expériences utilisateur exceptionnelles.
Excellent article clair , précis et simple. Félicitations pour ce travail
merci beaucoup