Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Vue.js 2

Tirer parti de Webpack

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Webpack et ses outils vous permettent de lancer le projet et la compilation pour le navigateur. Pour vous faciliter le travail, tout se fera de façon quasi automatique.
03:39

Transcription

Qu'est-ce que va nous apporter webpack pour nos développements ? Webpack est un outil très intéressant qui est déjà configuré et préconfiguré. D'ailleurs, vous pouvez voir ici que dans le package.json, on a un environnement qui va nous permettre de démarrer et cet environnement c'est node build/dev-server.js. C'est la commande dev qu'on aura et qu'on pourra utiliser avec npm et pour ça on va utiliser npm run et le nom de la commande. Il faut savoir que grâce à webpack, on va avoir une compilation de toutes les sources qui se trouvent ici, qu'on n'a absolument pas modifiée pour le moment donc c'est vraiment les sources fournies avec le projet démo et une fois que ça, ça va être construit, ça va aussi lancer un serveur et on va pouvoir tout tester sur le serveur. Vous vous souvenez tout à l'heure on a regardé qu'effectivement le serveur de dev se trouvait sur le port 8080 et vous allez voir que ça va bien démarrer sur le port 8080. Alors comment je vais m'y prendre pour démarrer mon serveur et pour demander la compilation via webpack ? Je vais simplement utiliser la commande npm run dev à la racine de mon projet. Quand je vais lancer ça vous allez voir qu'il va construire et il va me lancer tout de suite mon application sur le port 8080 et je vais arriver sur mon application ici qui va être déjà construite et que je vais pouvoir tout de suite tester. Ce qui est génial avec l'utilisation de webpack et des outils npm qui sont à disposition et qui sont déjà disponibles dans notre projet, c'est qu'on va pouvoir faire des modifications directement sur les fichiers et ces modifications vont être chargées automatiquement sans qu'on n'ai absolument rien à faire. Alors on n'a pas encore vraiment parlé de tout ce qui se trouve à l'intérieur des composants eccetera et de cette imbrication et de la conception actuelle mais sur la démo je peux vous montrer actuellement qu'effectivement une modification va automatiquement être prise en compte sans qu'on ai besoin de recharger. On voit ici qu'on a un petit template qui existe dans le composant Hello.vue, on va simplement enlever le mot links qu'on a là, on va enregistrer ce fichier et on va retourner sur Chrome et on verra qu'effectivement là ça a été rechargé. Donc votre serveur s'occupe de recharger à chaque fois qu'il y a une modification et il vous recharge également, et ça c'est très intéressant, il vous recharge Chrome. Donc ça se met à jour automatiquement sans qu'on n'ai besoin de rien faire. Ça c'est bien parce qu'il continue à tourner et dès qu'une modification va être effectuée dans le code source, il va construire. Bien sûr, il vous donnera aussi des erreurs si jamais vous vous êtes trompé quelque part puisque tout ça est construit pour que vous puissiez travailler en live sur votre application et que vous puissiez la développer au fur et à mesure sans avoir à vous préoccuper de recharger à chaque fois. Tout ce qu'il faudra faire évidemment ce sera enregistrer le fichier sur lequel vous êtes en train de travailler, pour pouvoir avoir un rechargement de tout le projet directement dans Chrome. Vous voyez que ça c'est des outils qui vont nous simplifier la vie en tant que développeur. C'est à ça que va servir essentiellement toute l'imbrication webpack eccetera. Webpack va se charger de construire toute votre application et puis avec les scripts npm, et avec le dev serveur qu'on a là, on va avoir un rafraichissement automatique et tout ça c'est déjà construit. Je vous inviterai aussi à aller lire un petit peu le script ici qui est créé et qui permet effectivement d'avoir du rechargement live parce que c'est assez intéressant à lire et puis ça vous permettra de voir comment ça a été construit. Si vous n'avez jamais fait de node.js par contre je vous conseille de faire un peu de node.js avant parce que tout ça est écrit avec node.js. Vous serez obligé d'y passer si vous voulez modifier quelque chose, si vous voulez faire évoluer votre script qui permet de faire la compilation de votre projet.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !