Tout ce dont vous avez besoin pour commencer avec Vue.js

Très probablement, en lisant ces lignes, vous avez déjà entendu parler du cadre JavaScript appelé Vue . Si vous alliez l’essayer, mais que vous n’imaginiez pas vraiment par quoi commencer, ce matériel a été écrit spécialement pour vous. Son auteur dit qu'il veut expliquer pourquoi il aime vraiment Vue. De plus, il va présenter à tout le monde 4 façons d'écrire la première application dans Vue.

Aperçu des matériaux

Habituellement, j'essaie de ne pas parler de trop de façons de résoudre les mêmes problèmes pour ceux qui commencent tout juste à apprendre un certain cadre. Mais dans ce cas, je pense qu'il est très important de montrer quelques façons de développer la première application Vue. Peut-être que vous aimez travailler avec la ligne de commande, ou peut-être avec des outils équipés d'une interface graphique. Les deux conviennent au développement de Vue. De plus, les applications Vue peuvent être écrites sans avoir recours à la ligne de commande. Pour ce faire, ajoutez simplement une balise à la page HTML pour charger le script correspondant. Et enfin, vous ne voudrez peut-être pas vous soucier de la configuration de votre environnement de développement. Au lieu de cela, vous vous efforcez d'essayer Vue dès que possible, sans mouvements inutiles. En fait, quelle que soit la stratégie que vous suivez, vous trouverez ici quelque chose pour vous aider à démarrer avec Vue.

Au cours de la lecture de ce document, vous rencontrerez des liens vers des ressources utiles. Et lorsque vous lirez tout cet article, je vous dirai à quoi vous devez prêter attention pour une étude plus approfondie de Vue. Il convient de noter qu'ici nous ne plongerons pas dans les subtilités de Vue, nous ne considérerons pas tous les mécanismes possibles de ce cadre. Nous allons aborder les bases et arriver à la première application fonctionnelle.

Tout d'abord, parlons de quelques fonctionnalités intéressantes de Vue.

Points forts de Vue

La force de Vue, à mon avis, est la convivialité de ce cadre pour les débutants. L'équipe de développement Vue a fait un travail formidable, essayant de s'assurer que les développeurs de diverses qualifications puissent rapidement commencer à travailler de manière productive avec le framework. Si vous connaissez HTML, CSS et JavaScript - cela signifie que vous êtes littéralement à un pas du développement d'applications assez puissantes sur Vue.

Je pense également que Vue, parmi les trois principaux outils de développement frontaux (Angular, React et Vue), présente les barrières d'entrée les plus faibles. Cela est vrai pour plusieurs raisons, mais pour moi, cela se résume à trois caractéristiques principales de Vue:

• Grande documentation.
• Magnifique communauté.
• Il s'agit d'un cadre progressif.

▍ Documentation

Si vous parlez avec des développeurs qui aiment Vue, je pense que beaucoup d'entre eux parleront tout d'abord de la qualité de la documentation de ce framework. Si vous visitez Vue.js, vous pouvez constater que la documentation est divisée en plusieurs sections:

• Leadership . Vous trouverez ici tout ce dont vous avez besoin pour démarrer avec Vue.js. Cette section est divisée en sous-sections faciles à comprendre qui présentent au lecteur les concepts nécessaires pour commencer à développer des applications basées sur des composants.
• API Cette section fournit une description détaillée de l'API Vue. Par exemple, si vous rencontrez une méthode dont vous n'êtes pas sûr, la visite de cette section vous aidera à clarifier la situation.
• Recommandations Ici vous pouvez trouver de merveilleuses recommandations, après quoi vous pouvez éviter l'apparition d'erreurs. Ces recommandations peuvent mettre en garde le développeur contre l'utilisation d'anti-patterns. L'important est que ce ne sont probablement pas des règles strictes, mais quelque chose comme un guide. Après vous être familiarisé avec Vue, écrire quelques applications, je vous recommande de lire les documents de cette section. Je crois que c'est une source très précieuse de connaissances sur Vue.
• Exemples . Vous trouverez ici des exemples d'applications développées par Vue. À votre place, je n'aurais pas cherché ici avant de m'être un peu habitué au développement de composants. Mais un peu plus tard, lorsque vous serez prêt à découvrir comment les applications Vue à part entière sont organisées, vous devriez étudier cette section.
• Livre de recettes . Cette section contient des réponses aux questions fréquemment posées sur Vue. Par exemple, à de telles questions: «Comment effectuer la validation de formulaire?», «Comment effectuer des tests unitaires d'un composant?». Ceci, encore une fois, est une ressource précieuse, mais le développement de son matériel devrait être reporté jusqu'au moment où vous avez des questions similaires à celles énumérées ci-dessus.
• Outils et bibliothèques de base. Vue a d'excellents outils et bibliothèques de base. Nous n'entrerons pas dans les détails particuliers à ce sujet, car nous devons commencer à écrire du code dès que possible. Je donnerai ici quelques liens vers des matériaux dont l'existence est utile à connaître. Ainsi, parmi les outils Vue, je noterais les suivants: outils de développement , Vue CLI , Vue Loader . Voici des liens vers des documents sur les bibliothèques officielles: Vue Router , Vuex , Vue Server Renderer .

▍ Communauté

En tant que programmeur, je me sens impliqué dans plusieurs grandes communautés. L'un d'eux est la communauté Vue. Ses membres sont sympathiques, amicaux, ils sont plus que disposés à aider ceux qui en ont besoin. Je recommande de suivre les membres suivants de la communauté Vue sur Twitter. Il vous sera donc plus facile de comprendre ce qu'ils font et de découvrir ce qu'ils vivent. Voici les liens:

• Evan vous
• Chris fritz
• Sarah drasner
• Damian sulisz
• Divya sasidharan
• Guillaume chau
• Ben hong
• Sébastien chopin
• Natalia Tepluhina
• Edd yerburgh

UeVue est un cadre progressif

Si vous visitez la page d' accueil de Vue.js, vous pouvez voir qu'il s'appelle là: "Framework JavaScript progressif". À première vue, cela peut sembler être un stratagème de marketing ordinaire, mais ayant une petite compréhension de l'essence de Vue, vous pouvez comprendre que ce n'est pas le cas. Déterminons d'abord la signification du mot «progressif». C'est quelque chose qui se passe ou se développe progressivement ou par étapes; c'est quelque chose qui se fait pas à pas.

Bientôt, vous verrez que lors du développement d'applications Vue, vous pouvez travailler en leur introduisant progressivement les capacités de ce framework. Par exemple, si vous avez déjà un certain projet, vous pouvez le doter du support Vue sans aucun problème. Vous pouvez commencer par charger le script Vue et écrire quelques lignes de code.

Si vous souhaitez utiliser l'interface CLI, l'outil de ligne de commande Vue, pour déployer un nouveau projet avec les capacités dont vous avez besoin, ce n'est pas un problème non plus. Au fur et à mesure que votre application se développe et que vous avez besoin de fonctionnalités assez avancées, telles que le routage ou la gestion des états, l'application ne sera pas difficile à équiper de ces fonctionnalités.

Comme déjà mentionné, Vue est un cadre abordable. Si vous connaissez déjà HTML, CSS et JavaScript, cela signifie que vous êtes prêt à démarrer avec Vue. En fait, si vous voulez vraiment commencer à écrire des applications Vue, je vous propose de le faire.

Option # 1: Script Vue connecté à la page

La première façon d'utiliser Vue que nous explorons est de connecter un script Vue à la page à l'aide de la <script> . Si vous avez déjà travaillé avec JavaScript, il n'y aura rien de nouveau pour vous. À savoir, nous parlons du fait qu'il existe une page HTML qui doit être équipée de certaines fonctionnalités implémentées dans une bibliothèque JS. Pour cela, la bibliothèque est connectée à la page à l'aide de la <script> . Il convient de noter que la méthode d'utilisation de Vue considérée ici n'est pas seulement adaptée au développement d'une application de formation. Il trouve application dans de vrais projets.

Il est généralement assez difficile d'introduire de nouveaux outils, bibliothèques ou cadres dans des projets réels, par exemple, dans l'organisation où travaille le programmeur. Par exemple, vous aimez vraiment travailler avec Vue. Vous allez aux autorités et demandez si vous pouvez réécrire le projet entier dans Vue. En réponse à une telle question, presque aucune option ne sera immédiatement refusée. Si vous proposez d'utiliser Vue sur une certaine page, dont vous êtes actuellement en train de développer le contenu, une telle offre pourrait bien être acceptée.

Dans l'exemple suivant, nous développerons une application très primitive, ce qui est bien car il sera très pratique de considérer certains concepts Vue dessus.

▍ "Bonjour, Vue!"

Dans cette application, nous allons afficher le texte "Bonjour, Vue!", Et en dessous du texte - l'heure et la date actuelles. Ensuite, nous écrirons un code qui maintient la date et l'heure à jour. En conséquence, l'utilisateur de l'application pourra l'utiliser comme une montre régulière, en observant le temps qui passe. Créez un nouveau dossier, créez-y un fichier index.html et ajoutez le code suivant à ce fichier:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html> 

Nous avons maintenant le cadre de page, le fondement de la future application. Par conséquent, notre prochaine étape sera de connecter le script Vue.js. à cette page. Ajoutez au code de la page, juste au-dessus de la </body> fermeture </body> , ce qui suit:

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script> 

Faites attention au commentaire. Il souligne une chose importante. À savoir, nous avons maintenant connecté la version de Vue destinée au développement à la page. Si une certaine page est destinée à une utilisation réelle, vous devez y connecter la version de production du script. Des détails à ce sujet peuvent être trouvés ici .

Maintenant, après avoir connecté le script, tout d'abord, nous devons ajouter l'élément racine à la page à laquelle l'instance Vue sera connectée:

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

Après cela, créez une nouvelle instance de Vue et faites-lui savoir à quel élément racine il doit se connecter:

 <script>  const app = new Vue({    el: '#app'  }) </script> 

Créez maintenant quelques variables. Ils stockeront les valeurs que nous utilisons pour afficher des informations sur la page. Cela se fait en déclarant les propriétés de l'objet de data :

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script> 

Maintenant que les données sont prêtes, nous sommes prêts à recourir à la capacité de Vue de les afficher sur la page. Cela se fait à l'aide de constructions simples et faciles à lire:

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div> 

Vous pouvez maintenant vous féliciter d'avoir créé votre première application Vue.js. Si vous ouvrez index.html dans un navigateur, il devrait afficher une page sur laquelle "Bonjour, Vue!" Est écrit en grosses lettres. Au-dessous de cette inscription devrait être une ligne qui affiche la date et l'heure actuelles. Pendant le développement et la recherche de ma version de l'exemple, j'ai utilisé Visual Studio Code et l'extension Live Server .

Ce que nous avons fait ici ne ressemble pas à un projet particulièrement avancé. Mais dans les entrailles de Vue, il se passe beaucoup de choses qui permettent à ce projet de fonctionner comme nous en avons besoin. Le cadre a établi la connexion entre le DOM et les données, après quoi l'application est devenue réactive. Comment vérifions-nous cela? Très simple - il suffit d'ouvrir la console JS (directement sur la page de l'application) et d'écrire quelque chose dans app.message . Cela devrait entraîner une modification de l'étiquette affichée sur la page. Voici à quoi cela pourrait ressembler.


Recherche d'application

Vue donne également aux développeurs la possibilité de créer des gestionnaires pour les événements du cycle de vie des composants. Cela signifie que nous pouvons écouter des événements tels que created , mounted et destroyed . Lorsqu'un événement se produit, vous pouvez organiser l'exécution de certains codes. Je n'entrerai pas dans les détails, car le but principal de ce matériel est de montrer différentes méthodes pour créer des applications Vue, et non de démonter toutes les subtilités du framework. Cependant, nous regardons toujours à quoi ressemble le traitement des événements du cycle de vie des composants et nous terminerons le travail sur notre première application.

Grâce au code suivant, la valeur de la variable now sera mise à jour toutes les secondes. Lors du montage de Vue, nous utilisons setInterval pour configurer un appel de fonction toutes les secondes pour mettre à jour la date et l'heure. Vous pouvez créer des gestionnaires d'événements de cycle de vie en ajoutant les méthodes appropriées à l'objet methods . Ceci est très similaire à la façon dont nous avons travaillé avec l'objet de data . Voici le code:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script> 

Si vous ouvrez cette page dans un navigateur, son apparence ne changera pas, mais l'heure affichée dessus sera mise à jour toutes les secondes. Dans ce cas, nous n'avons pas besoin de mettre à jour le DOM manuellement. Vue des données liées au DOM. Lorsque les données changent, ce qui est affiché sur la page change également.

Option # 2: Vue CLI

Bien que nous ayons créé l'application en connectant simplement le script Vue à la page, cette approche n'est pas très évolutive. Si vous avez besoin de développer une application pleine page à part entière (Single Page Application, SPA) et en même temps que vous souhaitez utiliser les outils auxiliaires Vue, il est préférable de recourir à la CLI Vue.

Si vous êtes de ceux qui n'aiment pas vraiment travailler sur la ligne de commande, vous pouvez bien utiliser un outil avec des fonctionnalités similaires qui a une interface graphique (Vue UI).

▍Installation de Vue CLI

Nous devons d'abord installer la CLI Vue. Avant de faire cela, vous devez obtenir Node.js et npm. Si vous n'avez jamais travaillé avec Node.js et npm auparavant, prenez le temps de les connaître et de les comprendre un peu. Voici la commande avec laquelle installer l'interface CLI Vue:

 npm install -g @vue/cli 

Pour créer une nouvelle application, vous pouvez utiliser la commande vue create . Vous pouvez trouver la liste des commandes vue charge par vue en utilisant la commande vue -h .


Liste des commandes prises en charge par vue

La commande create accepte le nom de l'application. Créez une nouvelle application Vue en exécutant la commande suivante:

 vue create hello-vue 

Lors de cette commande, un nouveau dossier hello-vue sera créé dans le répertoire courant. Une description détaillée du processus de création d'une application à l'aide de vue create mérite un article séparé.

Pour l'instant, il nous suffit d'accepter les paramètres par défaut. Cela conduira à la création d'une nouvelle application.


Création d'une nouvelle application à l'aide de l'interface CLI Vue

Maintenant, allez dans le dossier hello-vue , ouvrez le fichier situé dans src/components/HelloWorld.vue et remplacez tout son contenu par le code suivant:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Veuillez noter que la valeur du texte qui apparaît en msg est définie dans le src/App.vue .

Maintenant, sur la ligne de commande ou dans le terminal intégré à votre éditeur, exécutez la commande suivante:

 npm run serve 

Il démarrera le serveur, après quoi il donnera des informations sur la façon d'ouvrir la page de démarrage de l'application. À savoir, il s'agit de http: // localhost: 8080 / .


Application Vue dans le navigateur

Ici, nous n'avons examiné l'utilisation de Vue CLI que très superficiellement. Cependant, j'espère que cet exemple vous a montré à quel point il est facile d'utiliser Vue CLI pour créer de nouvelles applications dotées d'une infrastructure fiable et pouvant évoluer en fonction des besoins croissants d'un projet en développement.

Option # 3: Vue UI

Avec Vue CLI, avec l'outil de ligne de commande, l'outil Vue UI est également installé. Pour le démarrer, utilisez la commande suivante:

 vue ui 

Pendant son exécution, la page de la nouvelle application sera ouverte, située sur http: // localhost: 8000 / dashboard .


Page Vue UI

À l'aide de Vue UI, vous pouvez créer un nouveau projet qui aura les mêmes capacités qu'un projet créé à l'aide d'outils de ligne de commande.


Création d'un nouveau projet dans Vue UI

Une fois la configuration du projet terminée, vous pouvez le démarrer directement à partir de l'interface utilisateur Vue en accédant à la section Project tasks du Project tasks et en cliquant sur le bouton correspondant.


Exécution d'une application dans Vue UI

Option # 4: CodeSandbox

Bien que les options ci-dessus pour créer la première application Vue nous aient permis d'atteindre notre objectif, elles nécessitent une certaine configuration de l'environnement de développement. Cela ne vous convient peut-être pas et vous n'avez toujours pas créé votre première application Vue. Si tel est le cas, nous allons maintenant examiner une autre façon de travailler avec Vue. Il consiste à utiliser des environnements de développement en ligne, dont CodeSandbox .

Avant de créer des projets sur CodeSandbox, vous devrez vous inscrire sur le site ou vous connecter en utilisant un compte GitHub. Après cela, vous devez créer un nouveau «bac à sable» (dans le cadre du projet, il est appelé «bac à sable») et trouver Vue parmi les modèles disponibles (sur l'onglet Client templates Popular templates ou Client templates ).


Création d'un nouveau projet basé sur Vue dans CodeSandbox

Après cela, une nouvelle application Vue sera à votre disposition. Dans la figure suivante, vous pouvez voir que dans le volet gauche vous pouvez travailler avec des fichiers de projet, au centre se trouve la fenêtre de l'éditeur et à droite se trouve la zone d'aperçu dans laquelle l'application de travail est affichée.


Travailler sur l'application dans CodeSandbox

Ouvrez le fichier src/components/HelloWorld.vue dans l'éditeur et remplacez son contenu par le code suivant:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Après cela, vous verrez la même application que celle sur laquelle nous avons déjà travaillé. Lorsque vous travaillez sur un projet, il peut être nécessaire de le montrer à quelqu'un. Par exemple, pour consulter quelque chose. CodeSandbox vous permet de le faire en utilisant un lien spécial .


Travailler sur l'application dans CodeSandbox

Ressources utiles

Voici des liens vers certaines de mes ressources Vue préférées. Ils vous aideront à progresser dans l'élaboration de ce cadre. Par exemple, voici la page Awesome Vue , en visitant laquelle vous pourrez vous faire une idée de l'échelle de l'écosystème Vue. Trouvez les référentiels Vue ici. Voici le blog officiel du projet. Voici le site de la communauté des développeurs Vue. Voilà - les podcasts Vue. Voici les pages de plusieurs projets basés sur Vue: VuePress , Nuxt , Gridsome .

Et ensuite?

Quel que soit le framework que vous utilisez pour développer le frontend, vous devez garder vos connaissances JavaScript en bon état. Plus vous consacrez de temps à l'amélioration de vos connaissances JS, mieux c'est. Si vous connaissez bien JavaScript, cela signifie que vous pouvez gérer n'importe quel framework ou bibliothèque avec lequel vous pourriez avoir besoin de travailler.

J'ai déjà parlé du manuel Vue de la documentation officielle. Mais il convient de le mentionner à nouveau. Si j'étais un développeur novice, j'essayerais de traiter ce guide aussi complètement que possible, de le lire et de le relire. Mais en même temps, je n'oublierais pas de mettre en pratique les exemples de code qui s'y trouvent. Pas étonnant qu'ils disent que la répétition est la mère de l'apprentissage. La répétition joue un rôle important dans le processus d'apprentissage des nouvelles technologies, et vous ne pouvez pas vous en passer.

Lorsque vous travaillez avec de la documentation, vous devez porter une attention particulière aux concepts de base de Vue suivants:

• Les composants.
• Liaison de données.
• Gestion des événements.
• Directives.
• Les méthodes
• Propriétés calculées.
• Cycle de vie des composants.
• Propriétés passées aux composants.

Ne vous efforcez pas de créer de grandes applications pour l'instant. Concentrez-vous sur la maîtrise des choses de base, et tout le reste viendra avec le temps.

Résumé

Si vous suivez mes publications sur Twitter, vous savez que je suis un grand fan de Vue. J'aime construire des applications basées sur des composants. Je crois que l'utilisation de Vue simplifie non seulement le travail, mais rend également le processus d'écriture de code une expérience agréable et passionnante.

Chers lecteurs! Si vous avez récemment étudié votre premier framework client, merci de nous en faire part.