Comment créer une application avec Vue.js

Comment créer une application de blog avec Vue.js

L'écosystème JavaScript évolue depuis plus d'une décennie, ce qui signifie que les développeurs frontaux ont dû suivre les nouvelles technologies. Après le test Framework JavaScript et bibliothèques depuis plus de cinq ans, j'ai trouvé celle qui fonctionne pour moi: Vue.js.

Dans ce tutoriel, je vais expliquer la structure de base d'une application Vue. De plus, je vais définir les composants en détail et aborder des fonctionnalités plus avancées comme les mixins pour démontrer comment démarrer un blog fonctionnant sur votre propre application simple.

Vous voulez plus de conseils? Nous avons des guides sur tout, de hébergement Web services à stockage en ligne options et le meilleur Générateur de site Web autour de.

Les avantages de Vue.js

Le principal argument de vente de Vue.js est sa facilité d'apprentissage, car il est écrit en HTML, CSS et JavaScript. La bibliothèque est prise en charge par un ensemble de Documentation qui est constamment mis à jour. La taille de la bibliothèque est petite par rapport aux concurrents. De plus, son CLI 3.0 a été réécrit pour être à l'épreuve du temps.

  • Accélérez les performances avec Vue.JS

Commencer

Pour suivre ce didacticiel, vous avez juste besoin d'une connexion Internet car tout le développement va avoir lieu dans CodeSandbox, un éditeur de code Web complet. Le lien vers le code peut être trouvé ici .

Notre application comprendra des fichiers de configuration tels que package.json , une index.html page qui est le fichier d'entrée de notre application et un SRC dossier qui est au cœur de notre application. Le contenu de ce dossier va être expliqué tout au long du tutoriel.

Components in Vue

Vue offre la possibilité de créer des composants. Ce sont des éléments personnalisés utilisés pour encapsuler du code réutilisable et peuvent varier d'un simple bouton à une page complète. Un composant se compose de trois sections principales, , et , qui sera exploré plus loin.

Create App.vue

Nous allons démarrer notre application en créant un App.vue fichier qui est notre racine. Ce composant englobera tous nos futurs composants. Le premier composant va être très simple, car il ne contient aucune donnée dynamique mais inclut simplement les trois sections mentionnées précédemment (modèle, script, style).

export default { name: 'App', components: {} }; #app { //Normal css here }

Create article.vue

Pour créer notre application de blog, nous avons besoin d'articles. Cela implique la création d'un fichier appelé article.vue et le stocker dans un dossier de composants. Ce composant va être plus complexe, car il comprendra certaines fonctionnalités de base de Vue qui lui permettront d'être dynamique.

La première fonctionnalité que nous allons introduire est appelée une directive, les doubles accolades, qui remplacera la valeur du titre par une propriété dynamique passée au composant. Il s'agit d'un jeton spécifique qui est ajouté dans le HTML et utilisé par la bibliothèque Vue pour modifier le DOM afin de produire du HTML.

{{ title }}

{{ value }}

Pour que le composant soit dynamique, nous devons pouvoir lui transmettre des données. Cela peut être réalisé en déclarant des propriétés. Un composant a également accès à sa propre variable d'instance privée appelée data.

export default { props: { title: String, value: { type: String, required: true } }, data() { return { likes: 0, showingSnippets: true }; }};

Ce composant a juste besoin d'un style de base pour s'afficher correctement.

Pour afficher notre premier article, nous devons suivre trois étapes: inclure le fichier dans App.vue , ajoutez-le dans l'instance Vue et référez-le dans le cadre de la section template:

import ArticleContainer from './components/Article'; export default { name: 'App', components: { ArticleContainer } };

Malheureusement, l'exécution de ce code produira une erreur, car nous n'avons pas fourni toutes les propriétés définies comme requises dans le composant article. Pour résoudre le problème, nous devons déclarer un objet de données et utiliser une nouvelle directive appelée v-bind pour transmettre l'objet au composant article.

… … … name: 'App', data: function() { return { post: { title: 'My first post', value: 'Lorem ipsum dolor sit amet,….', img: 'img/' } }; },…

générer new york

Ne manquez pas la conférence de génération de cette année à New York. Cliquez sur l'image pour en savoir plus

Propriétés calculées

Pour rendre notre composant plus complexe, nous allons introduire une nouvelle fonctionnalité de l'API Vue appelée calculé . Ceci est généralement appelé «propriétés calculées», car sa valeur est convertie en une propriété immobilière. Afin de montrer comment les propriétés calculées fonctionnent, nous allons améliorer notre composant pour prendre en charge une vue d'extraits de code et une vue complète de l'article.

{{ title }}

{{ snippets }}

{{ value }}

{{ buttonText }} Likes: {{ likes }} export default { props: { title: String, value: { type: String, required: true }, snippetsLength: { type: Number, required: false, default: 20 } }, data() { return { likes: 0, showingSnippets: true }; }, computed: { snippets() { const fullArticle = this.value; const articleSnippets = fullArticle.substring(0, this. snippetsLength); return `${articleSnippets}...`;}, buttonText() { return this.showingSnippets ? 'Show full article' : 'Show snippets';} }, methods: { toggleArticle() { this.showingSnippets = !this.showingSnippets; } }};

Cet exemple fournit une nouvelle directive v-si et v-on , qui affichera ou masquera automatiquement les composants, en utilisant une variable privée appelée montrantSnippets . La valeur des extraits de code est calculée à la volée et changera si l'une des propriétés qu'il utilise ( snippetsLength , fullArticle ) changements.

MainComponent.vue

La prochaine étape implique un nouveau composant qui sera le corps de notre application, utilisé pour émuler un appel API et nous présenter une nouvelle directive v-pour . L'API Vue donne accès à une liste complète de hooks pour charger et déclencher des événements au bon moment (dans notre cas monté). Celles-ci sont hors de portée de ce tutoriel mais des détails peuvent être trouvés ici .

import articleContainer from './article.vue'; import FakePosts from '../data/posts.js'; export default { data: function() { return { Posts: [] }; }, methods: { fakeApiCall() { //here we are emulating the possibility to load the value with an api this.Posts = FakePosts;} }, components: { articleContainer }, mounted() { this.fakeApiCall();} };

Construire un mixin

Une autre fonctionnalité puissante de Vue.js sont les mixins. Ce sont des méthodes JS réutilisables qui étendent les fonctionnalités d'un composant spécifique. Les mixins ont accès à la plupart des API Vue (propriétés, données, méthodes). Ils sont généralement stockés dans un mixins dossier, créé dans le répertoire SRC et, comme les mixins sont purement JS, enregistrés avec un .js extension.

Au début, la puissance de cette fonctionnalité peut ne pas être évidente. Cependant, au fur et à mesure que vous vous familiariserez avec Vue et son API, les mixins commenceront à prendre forme et à prendre en charge votre application. J'ai vu cette fonctionnalité utilisée pour définir la validation d'entrée, l'internationalisation et fournir des fonctionnalités de produit, telles que le téléchargement de fichiers.

La principale différence entre un composant normal et un mixin est que ce dernier peut être inclus et appliqué à n'importe quel composant. Par exemple, vous pouvez ajouter un mixin de téléchargement de fichier à un bouton ou une image et ils auront tous accès à la nouvelle fonctionnalité.

Nous allons construire un mixin d'accessibilité. Cela fournira un toggleContrast méthode qui peut être appliquée à n'importe lequel de nos composants.

export default { props: { lightTextColour: { type: String, default: '#252525' }, lightBackgroundColour: { type: String, default: '#fff' }, darkTextColour: { type: String, default: '#fff' }, darkBackgroundColour: { type: String, default: '#252525' } }, data() { return { isLight: true }; }, methods: { toggleHighContrast() { this.isLight = !this.isLight; if (this.isLight) { this.$el.style.backgroundColor = this.lightBackgroundColour; this.$el.style.color = this.lightTextColour; } else { this.$el.style.backgroundColor = this.darkBackgroundColour; this.$el.style.color = this.darkTextColour; } }} };

Maintenant que notre code est défini, nous pouvons l'inclure dans n'importe quel composant et utiliser ses méthodes et propriétés comme si elles étaient définies dans le composant réel. Les mixins peuvent être pilotés par des propriétés, leur permettant de l'offrir dès qu'ils sont inclus dans le composant, ou ils peuvent avoir besoin d'une action pour prendre effet (par exemple devoir appeler une méthode spécifique).

Pour profiter pleinement de cette fonctionnalité, nous devons effectuer la modification suivante dans notre code:

… Toggle High Contrast import Accessibility from '../mixins/Accessibility.js'; … mixins: [Accessibility] };

Nous pouvons maintenant basculer le contraste sur le composant individuel en utilisant le nouveau bouton défini. Il est important de comprendre que même si aucune propriété supplémentaire n'a été définie, notre composant article est en fait capable d'accepter lightTextColour , darkTextColour , lumièreContexteCouleur et darkBackgroundCouleur . Ceux-ci sont définis dans le mixin d'accessibilité.

Notre petit prototype fonctionne désormais pleinement et peut être utilisé comme référence pour de futurs projets.

Cet article a été initialement publié dans le numéro 316 de rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Achetez le numéro 316 ici ou abonnez-vous ici .

Articles Liés: