Démarrer rapidement avec Vue.js : Guide du débutant
Tim
June 17th, 2024
Vue.js est un framework JavaScript populaire qui permet de créer des interfaces utilisateur web interactives et dynamiques. Sa simplicité d'apprentissage et sa flexibilité en font un choix idéal pour les débutants comme pour les développeurs expérimentés.
Si vous souhaitez vous lancer dans le développement d'applications web modernes avec Vue.js, ce guide vous permettra de démarrer rapidement et facilement.
1. Prérequis
Avant de commencer, assurez-vous de disposer des éléments suivants :
Un éditeur de code : vous pouvez utiliser un éditeur de code simple comme Notepad++ ou SublimeText, ou un éditeur de code plus complet avec des fonctionnalités spécifiques au développement web comme Visual Studio Code.
Un navigateur web : vous pouvez utiliser n'importe quel navigateur web moderne comme Chrome, Firefox, Safari ou Edge.
Node.js (facultatif) : si vous souhaitez utiliser des fonctionnalités avancées de Vue.js comme le routage (router) ou la gestion d'état (state), vous aurez besoin d'installer Node.js. Cela vous permettra d'exploiter ce qu'on appelle un outil de build comme webpack ou vite pour optimiser votre workflow de développement.
2. Installer Vue.js
Il existe plusieurs façons d'installer Vue.js. Vous pouvez :
L'inclure directement dans votre page HTML : voici un exemple de votre fichier HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apprendre vue rapidement</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const message = ref("Je suis un grand fan de Bleach, et vous ?")
return {
message
}
}
});
app.mount('#app')
</script>
</body>
</html>Utiliser un gestionnaire de paquets comme npm ou yarn: Si vous utilisez Node.js, vous pouvez initialiser un projet vuejs grâce à
vite:
npm create vite@latest
- Choisissez Vue comme template.
- Ensuite, choisissez Javascript.
- Suivez les instructions :
- Se rendre dans le dossier de votre projet.
- Lancez npm install à la racine du dossier.
- Lancez le serveur de développement.
Vous devriez avoir une structure de projet qui ressemble à ceci.
Vous pouvez accéder à l'application de démonstration à l'adresse mentionnée. Généralement c'est :
http://localhost:5173/. Mais le port peut changer si ce dernier est déjà utilisé.
En vous rendant dans le dossier src, le fichier d'entrée principal est index.html. Mais vous n'avez rien à toucher dedans pour commencer à jouer avec vuejs. À la place, rendez-vous dans le fichier App.vue puis essayez de changer le texte : Vite + Vue par Bonjour le monde ou ce que vous voulez. Voilà !
Vous savez maintenant comment installer rapidement une application Vue.js. La prochaine étape est donc d'apprendre à utiliser le framework afin d'en tirer tout son potentiel. Ainsi, sans plus attendre, retrouvez ici les bases de vuejs.