Pour installer Vue.js, vous pouvez suivre les étapes ci-dessous :
Étape 1: Créez un nouveau répertoire pour votre projet et ouvrez le terminal dans ce répertoire.
Étape 2 : Utilisez npm pour installer Vue CLI(Command Line Interface) en exécutant la commande suivante :
npm install -g @vue/cli
Étape 3 : Après une installation réussie, vous pouvez créer un nouveau projet Vue à l'aide de la commande suivante :
vue create my-vue-project
Étape 4: choisissez les options de configuration pour votre projet, y compris l'installation des préprocesseurs Babel, ESLint et CSS(facultatif).
Étape 5 : Une fois le processus de création du projet terminé, accédez au répertoire du projet à l'aide de la commande :
cd my-vue-project
Étape 6 : exécutez la commande suivante pour démarrer le projet Vue :
npm run serve
Une fois le processus de démarrage terminé, vous verrez une URL pour accéder à votre application Vue sur le navigateur.
Un exemple simple de Vue.js :
Créons un nouveau fichier HTML et nommons-le index.html `. Dans ce fichier, ajoutez le code suivant :
html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
changeMessage() {
this.message = 'Message changed successfully!';
}
}
});
</script>
</body>
</html> Dans cet exemple, nous avons créé une application Vue simple avec une h1 balise et un bouton. Lorsque le bouton est cliqué, le message change.
Enregistrez le index.html fichier et ouvrez-le dans le navigateur. Vous verrez le message initial comme "Hello Vue.js!". Lorsque vous cliquez sur le bouton, le message devient "Message modifié avec succès !".
Ceci est juste un exemple simple pour vous aider à démarrer avec Vue.js. Vous pouvez explorer de nombreuses autres fonctionnalités et capacités puissantes de Vue.js tout en développant vos applications.