Introduction à Vue, axée sur l'environnement et couvrant l'utilisation des composants de fichier uniques et du processus de génération.

Note de l'éditeur:

Cet article est un bon compagnon à l'article " Hello Vue: un didacticiel rapide sur la prise en main de Vue ". Cet article décrit plus en détail certains des aspects les plus avancés de l'environnement Vue, mais moins la structure du code.

Cela fait maintenant un peu plus de six mois que je travaille avec Vue et la première chose qui m'impressionne à ce jour est sa facilité d'utilisation. D'une certaine manière, cela me rappelle plus une jQuery moderne que Angular ou React. Le fait que vous puissiez simplement déposer une balise de script sur une page et devenir folle m'a rendu beaucoup plus enclin à "jouer" avec Vue par rapport aux autres frameworks existants. (Et pour être clair, je sais que cela est possible avec d’autres frameworks, mon point est que Vue permet vraiment cela de manière simple.)

Alors que j’ai utilisé Vue pour construire beaucoup de démos, construit jusqu'ici a été basé sur ce cas d'utilisation particulier – l'ajout d'une balise de script et ensuite du code pour ajouter de l'interactivité à une page. Il n’ya rien de mal à cela, mais Vue prend également en charge la création d’applications complètes (applications à page unique ou SPA, comme les enfants les appellent). C'est un domaine que j'ai évité parce que – et je vais être honnête ici – cela me semble un peu écrasant. J'ai décidé d'écrire ce post pour aider d'autres personnes qui pourraient se trouver dans le même bateau et pour m'aider à surmonter ma propre peur.

Comme toujours, c'est un article du type "Qu'est-ce que Ray pense?" comme, enfin, les opinions, mais j'espère que cela aide! Aussi, je veux crier mon copain Robert Zehnder . Il a commencé à ramasser Vue après avoir vu mon blog à ce sujet et il a continué à me dépasser dans le genre de choses cool qu'il fait avec. Merci Robert!

Ok, mais pourquoi?

Si j'aime la simple approche de "supprimer une balise de script et aller", pourquoi voudrais-je faire quelque chose de plus complexe que cela?

La première réponse à cette question Il y a une grande différence entre créer une interactivité simple dans une page et créer une application. Bien que vous puissiez créer une application complète avec l’approche de la balise de script, celle-ci risque de devenir un peu compliquée au bout d’un certain temps.

La deuxième plus grande raison, à mon avis, est l'utilisation de composants de fichier unique. Ceci est une méthode d'écriture des applications Vue qui, pour seulement, est merveilleuse quand on les voit pour la première fois.

Vous avez un processus de construction qui peut être un peu difficile si vous n'êtes pas habitué à em (je ne le suis pas!), Mais comme vous le verrez, ce n'est pas le cas. t trop effrayant d'un changement. Passons en revue un exemple.

First – The CLI

La première chose à faire est d'obtenir CLI . C'est un outil incroyablement puissant qui vient de recevoir une mise à jour majeure, mais je vais garder ce post sur les bases.

Attention, la Vue CLI existe depuis un certain temps, mais comme je vous le disais, il y a eu une mise à jour majeure. La façon dont vous l'installez diffère maintenant, de sorte que vous rencontrerez probablement des articles de blog plus anciens traitant de la CLI et vous devriez ne pas s'attendre à ce qu'ils fonctionnent tels quels. (Techniquement, ils installeront un binaire complètement différent mais – oui – faites attention.) Suivez les instructions d'installation sur le site officiel et vous serez prêt à partir.

– Faire un projet

Une fois installé, vous pouvez ensuite créer un nouveau projet Vue (et oui, "projet", nous ne faisons pas que construire un fichier Vue, nous faisons du vrai travail de développement Web maintenant!) commande:

 vue create app1 

On vous demandera d'abord si vous voulez prendre les valeurs par défaut ou sélectionner des options. Il suffit de prendre les valeurs par défaut. Il va alors commencer à faire toute une tonne de choses. Selon votre plateforme, vous pouvez peut-être aller prendre un café. J'utilise le sous-système Windows pour Linux qui est génial, mais un peu lent pour les opérations de fichiers volumineux. Une fois l'opération terminée, jetez un coup d'oeil à ce qu'il a créé:

Babel pour créer des JavaS compatibles avec les versions antérieures. Crypt. Cela vous permet d'utiliser le joker hipster sophistiqué sans soucis.

Ok, et le reste?

Le fichier README.md est un rapide récapitulatif des commandes que vous pouvez utiliser pour travailler avec le projet. Nous allons commencer à l'utiliser dans un peu.

Le dossier src est l'endroit où votre application vit vraiment . C'est là que nous allons travailler et j'y reviendrai aussi

Le dossier public est étrange.

Le dossier public est utilisé de plusieurs manières. Il y a tout d'abord un fichier index.html qui sert de modèle à votre application finale. Lorsque vous créez vos versions de production, vous les utiliserez comme modèles. Vous pouvez également utiliser ce dossier pour stocker des images, etc. J'ai eu du mal à trouver des documents à ce sujet, mais vous pouvez en lire plus ici: HTML et actifs statiques

Suivant – Travailler avec le projet

Avant d'aborder les différents éléments du projet, regardons comment vous travaillez avec Tout cela vient du fichier README donc si vous oubliez, cochez simplement la case.

Pour exécuter le projet, c'est-à-dire configurer un serveur Web local afin de voir votre code en action, vous procédez comme suit: serveur d'exécution npm .

Pour créer une version de production de votre projet pouvant être téléchargée sur un serveur Web actif, vous exécutez: npm run build .

Il y a plus de commandes, mais ces deux sont tout ce dont vous avez besoin au début. Commençons le serveur Web avec cette première commande:

En fouillant dans les fichiers du projet

Bon, ça peut être un peu long, surtout si vous connaissez Vue correspond à la mienne – déposer une balise de script et simplement écrire du JavaScript et des éléments de modèle dans votre fichier HTML. Le modèle par défaut aura les fichiers suivants.

• main.js : Ceci est le point d'entrée principal (heh get it) dans votre application. Il charge App.vue (I ' Je parlerai de cela dans une seconde) et manipule la mise en place de l'association entre Vue et le modèle depuis public / index.html . Si vous regardez le index.html vous verrez
  et si vous regardez main.js vous verrez: $ mount ('# app' ) . D'après ce que je sais en ce moment, vous n'aurez probablement pas besoin de le modifier lorsque vous démarrez pour la première fois.
• App.vue : Woot, voici votre premier aperçu d'un composant de fichier unique . Si vous n'avez jamais travaillé avec l'un d'eux, ils vous permettent essentiellement de combiner l'interface utilisateur, le code et le style d'un composant dans un seul fichier. Cela "semble" comme un excellent moyen d’écrire le code de Vue. Maintenant, ne vous inquiétez pas si vous n'utilisez pas beaucoup de composants. Personnellement, je les ai seulement utilisés un peu. Généralement, si j'ai une application Vue qui affiche quelque chose dans une liste, comme les résultats de recherche, j'aime créer un composant pour gérer l'affichage de cet élément. La différence ici est que tout ce que vous faites en 19459017 sera une composante. Du haut de l'application (ce que vous avez ici) à tout ce qui est rendu. Dans cet exemple particulier, l'application se compose d'une image puis d'un autre composant, HelloWorld . Vous pouvez aussi l'ouvrir si vous le souhaitez – et vous le trouverez dans le dossier components . Donc, mon instinct me dit qu'un projet typique utilisera App.vue comme une page d'accueil "root" et que tout ce qui se trouve dans votre application proviendra des composants que vous définissez.
• assets dossier qui contient – vous l'avez deviné – des actifs. Dans ce cas, un fichier png. Je crois que le stress, en mettant l'image ici, vous pouvez utiliser Webpack pour faire des optimisations automatiques sur eux. En fait – je viens de vérifier deux fois, et les documents du dossier public font vraiment du bon travail en parlant de cela:

Tous les éléments statiques placés dans le dossier public seront simplement copiés et ne passeront pas par webpack . Vous devez vous y référer en utilisant des chemins absolus.

Notez que nous vous recommandons d'importer des éléments dans le graphique de dépendance de votre module afin qu'ils passent par Webpack avec les avantages suivants:

• Les scripts et feuilles de style sont minifiés et regroupés pour éviter des requêtes réseau supplémentaires.
• Les fichiers manquants provoquent des erreurs de compilation au lieu des erreurs 404 pour vos utilisateurs.
• Les noms de fichiers de résultat incluent des hachages de contenu. les navigateurs mettent en cache leurs anciennes versions.

Construisons une application!

Donc, dans ce billet de blog, je vais créer une application "une page" assez simple, et pour être clair, c'est trop compliqué Itinéraire du projet Vue. À mon avis, de toute façon, et c'est certainement quelque chose où différentes personnes auront des opinions différentes. J'ai une bonne idée pour une application de suivi qui utilisera le routeur, une bibliothèque d'interface utilisateur, etc., mais je ne veux pas aller trop loin dans cet article et confondre les gens.

application, je vais construire un moteur de recherche qui frappe une API qui renvoie… des API. Le génial Todd Motto a créé un excellent repo GitHub d'API publiques . Et puis Digital Ocean a construit une API en plus de cela: https://github.com/davemachado/public-api . Donc, fondamentalement, c'est une API qui retourne des API.

Comme je l'ai dit, ce sera une application simple d'une page. Je vais avoir un champ de recherche lié à un appel Ajax pour charger les résultats en fonction de votre recherche. Je vais utiliser un composant pour afficher mes résultats de recherche.

Pour commencer, j'ai nettoyé un peu le code par défaut. Tout d'abord, j'ai édité App.vue ainsi:

import Rechercher à partir de './ components / Search.vue' export par défaut { 19659060] 'app' composants: { ] Recherche } [1945945]