Premiers pas et 10 bonnes pratiques —

Vue.js (également connu sous le nom de Vue) est un framework JavaScript populaire pour la création d’interfaces utilisateur. Sa bibliothèque principale se concentre uniquement sur la couche de vue, ce qui facilite son intégration avec d’autres bibliothèques ou projets existants. Dans ce didacticiel, nous couvrirons les bases de Vue et vous guiderons tout au long du processus de création d’une application simple.

Configuration de votre environnement

Pour démarrer avec Vue, vous devez avoir installé Node.js sur votre ordinateur. Vous pouvez le télécharger sur le site officiel site Internet. Une fois que vous avez installé Node.js, vous pouvez utiliser le gestionnaire de packages de nœuds (npm) pour installer Vue.

Ouvrez votre terminal ou invite de commande et exécutez la commande suivante :

npm install -g vue

Cela installera la dernière version de Vue globalement sur votre système.

Création d’un nouveau projet Vue

Maintenant que vous avez installé Vue, créons un nouveau projet. Nous utiliserons Vue CLI pour générer un nouveau modèle de projet. Tout d’abord, installez Vue CLI en exécutant :

npm install -g @vue/cli

Ensuite, créez un nouveau projet en exécutant :

vue create my-vue-app

Remplacer my-vue-app avec le nom que vous voulez pour votre projet. La CLI vous demandera de choisir un préréglage. Sélectionnez le default préréglé pour garder les choses simples pour ce tutoriel.

Une fois le projet créé, accédez au dossier du projet :

cd my-vue-app

Maintenant, démarrez le serveur de développement en exécutant :

npm run serve

Cela lancera un serveur local à http://localhost:8080/. Ouvrez cette URL dans votre navigateur pour voir votre nouvelle application Vue.

Comprendre la structure du projet Vue

Prenons un moment pour comprendre la structure du projet généré. Les principaux dossiers et fichiers avec lesquels vous travaillerez sont :

• public: contient les assets statiques et les index.html déposer.
• src: contient le code source de votre application, y compris les composants, les ressources et les principaux App.vue déposer.
• src/main.js: le point d’entrée de votre application. C’est là que Vue est importé et l’instance racine de Vue est créée.
• src/App.vue: le composant principal de l’application. C’est ici que vous allez créer la mise en page et la structure de votre application.

Création de votre premier composant Vue

Les composants sont les blocs de construction d’une application Vue. Ce sont des morceaux de code réutilisables qui peuvent être combinés pour créer des interfaces utilisateur complexes. Créons un composant simple pour afficher un message.

Dans le src/components dossier, créez un nouveau fichier appelé Message.vue. Ajoutez le code suivant :

<template>
<div>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>

Ce composant a une seule propriété de données appelée message. Le modèle affiche la valeur de cette propriété dans un élément de paragraphe.

Maintenant, utilisons ce composant dans notre main App.vue déposer. Tout d’abord, importez le Message composant en haut de la section script :

import Message from './components/Message.vue';

Ensuite, enregistrez le composant en l’ajoutant au components objet:

components: {
Message
}

Enfin, ajoutez le Message composant au modèle :

<Message />

Ton App.vue le fichier devrait maintenant ressembler à ceci :

<template>
<div id="app">
<Message />
</div>
</template>

<script>
import Message from './components/Message.vue';

export default {
name: 'App',
components: {
Message
}
};
</script>

Enregistrez vos modifications et vérifiez votre navigateur. Vous devriez voir le message « Hello, Vue ! » message affiché sur la page.

Ajouter de l’interactivité avec les directives Vue

Vue fournit un ensemble de directives qui vous permettent d’ajouter de l’interactivité à vos composants. Créons une application de compteur simple pour montrer comment utiliser les directives.

Mettre à jour le Message.vue composant avec le code suivant :

<div>
<p>{{ message }}</p>
<p>Counter: {{ counter }}</p>
<button @click="increment">Increment</button>
</div>

<script>
export default {
data() {
return {
message: 'Hello, Vue!',
counter: 0
};
},
methods: {
increment() {
this.counter++;
}
}
};
</script>

Nous avons ajouté une nouvelle propriété de données appelée counter et une méthode appelée increment. Le increment méthode augmente la valeur de counter par 1. Dans le modèle, nous avons ajouté un paragraphe pour afficher la valeur du compteur et un bouton pour déclencher le increment méthode.

Le @click directive est utilisée pour attacher le increment méthode à l’événement click du bouton. Lorsque le bouton est cliqué, le increment sera appelée et la valeur du compteur augmentera.

Enregistrez vos modifications et vérifiez votre navigateur. Vous devriez voir l’application de compteur fonctionner comme prévu.

Utilisation du rendu conditionnel et des boucles

Vue fournit des directives pour le rendu conditionnel et le bouclage dans les tableaux. Mettons à jour notre Message.vue composant pour démontrer ces fonctionnalités.

Ajoutez le code suivant au Message.vue composant:

<div>
<p>{{ message }}</p>
<p>Counter: {{ counter }}</p>
<button @click="increment">Increment</button>
<p v-if="counter >= 5">You've reached 5 or more!</p>
<ul>
<li v-for="number in numbers" :key="number">{{ number }}</li>
</ul>
</div>

<script>
export default {
data() {
return {
message: 'Hello, Vue!',
counter: 0,
numbers: [1, 2, 3, 4, 5]
};
},
methods: {
increment() {
this.counter++;
}

Nous avons ajouté une nouvelle propriété de données appelée numbers, qui est un tableau d’entiers. Nous avons également ajouté un paragraphe qui ne s’affichera que si le counter La valeur est 5 ou plus, en utilisant le v-if directif.

Le v-for directive est utilisée pour parcourir la numbers tableau et créez un élément de liste pour chaque numéro. Le :key L’attribut est utilisé pour fournir une clé unique pour chaque élément de la liste, ce qui est requis pour des raisons de performances.

Enregistrez vos modifications et vérifiez votre navigateur. Vous devriez voir les nouvelles fonctionnalités fonctionner comme prévu.

Meilleures pratiques de Vue

1. Architecture à base de composants. Décomposez votre application en petits composants réutilisables. Cela favorise la maintenabilité, la lisibilité et la testabilité.

2. Composants à fichier unique. Utiliser .vue fichiers pour encapsuler le modèle, le script et les styles de chaque composant. Cela permet de garder votre code organisé et facile à comprendre.

3. Conventions de nommage. Adoptez une convention de dénomination cohérente pour les composants, comme PascalCase ou kebab-case. Cela facilite l’identification et la référence des composants dans votre projet.

4. Validation des accessoires. Définissez et validez les accessoires pour les composants afin de vous assurer que les types de données et les valeurs corrects sont transmis. Cela aide à détecter les erreurs plus tôt et améliore la lisibilité du code.

5. Propriétés calculées. Utilisez des propriétés calculées au lieu de méthodes pour les calculs qui dépendent de données réactives. Les propriétés calculées sont mises en cache et réévaluées uniquement lorsque leurs dépendances changent, ce qui améliore les performances.

6. Observateurs. Utilisez les observateurs avec parcimonie et uniquement lorsque cela est nécessaire. Préférez les propriétés ou les méthodes calculées pour réagir aux changements de données.

7. Gestion des événements. Utilisez le système de gestion d’événements intégré de Vue (v-on ou @) au lieu de manipuler directement le DOM. Cela garantit que votre code est plus maintenable et moins sujet aux erreurs.

8. CSS délimité. Étendez vos styles de composants à l’aide de la scoped attribut dans la balise de style. Cela empêche les styles de fuir vers d’autres composants et garantit une bonne encapsulation.

9. Vuex pour la gestion des états. Utilisez Vuex pour gérer l’état de votre application lorsque vous traitez des flux de données complexes ou un état partagé entre les composants. Cela centralise la gestion des états et rend votre code plus prévisible et maintenable.

10. Essai. Écrivez des tests unitaires pour vos composants et des tests de bout en bout pour votre application. Cela garantit la stabilité de votre code et aide à détecter les erreurs plus tôt.

Éviter les pièges courants de Vue

1. Utilisation excessive v-if et v-for. Évitez d’utiliser v-if et v-for sur le même élément, car cela peut entraîner des problèmes de performances. Utilisez plutôt des propriétés calculées pour filtrer la liste avant le rendu.

2. Modification directe des accessoires. Ne modifiez jamais un accessoire directement dans un composant enfant. Au lieu de cela, émettez un événement au composant parent pour mettre à jour le prop.

3. Ne pas utiliser l’attribut clé avec v-for. Utilisez toujours l’attribut key avec v-for pour aider Vue à suivre l’identité de chaque nœud. Cela améliore les performances et évite les comportements inattendus.

4. Utilisation excessive des mixins globaux. Utilisez les mixins globaux avec parcimonie, car ils peuvent introduire des effets secondaires imprévus et rendre votre code plus difficile à comprendre. Préférez les mixins locaux ou les fonctions utilitaires.

5. Utilisation excessive $refs. Évitez d’utiliser $refs pour manipuler directement les composants enfants. Utilisez plutôt des accessoires et des événements pour communiquer entre les composants.

6. Pas d’optimisation pour la production. Assurez-vous de créer votre application pour la production à l’aide des outils de génération de Vue. Cela minimise la taille du bundle et optimise l’application pour de meilleures performances.

7. Ignorer l’accessibilité. Faites attention aux meilleures pratiques d’accessibilité, telles que l’utilisation du HTML sémantique, des attributs ARIA et de la navigation au clavier. Cela garantit que votre application est utilisable par un public plus large.

Conclusion

Dans ce didacticiel, nous avons couvert les bases de Vue, notamment la configuration de votre environnement, la création d’un nouveau projet, l’utilisation de composants et l’utilisation de directives pour l’interactivité, le rendu conditionnel et les boucles. Avec cette base, vous pouvez continuer à explorer les fonctionnalités puissantes de Vue et créer des applications plus complexes.

N’oubliez pas de consulter l’officiel Documentation de vue pour des informations plus détaillées et des exemples. Bon codage !