Découvrir Vue.js 2

Installer Vue.js 2 sur son ordinateur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'installation de Vue.js est facile, elle se fait par l'intermédiaire d'un paquet. Dans cette séquence, vous apprendrez à mettre en place le framework et les outils associés.
05:11

Transcription

Comment on va installer du JS sur sa machine ? Alors, y’a plein, plein de méthodes pour l’installer. On a la première méthode qui est la plus simple. Alors, on se mettre dans un dossier, VUEJS et puis on va créer un nouveau fichier qui va s’appeler index.html. Puis vous allez commencer par créer un template en HTML, html:5, on va faire html:5 et tabulation. Là, vous avez créé directement, voilà, un petit template très simple et ici, bien vous n’avez plus qu’à insérer le script Vue.js. Alors pour ça, plusieurs possibilités, comme on le voit dans la documentation. Soit on télécharge la version Développement haute production, vous pouvez le télécharger, c’est très facile ; soit on va utiliser la version CDN – Content Delivery Network – qui nous permet, ici, bien d’avoir un paquet de Vue.js qui est déjà hébergé. Alors, ça c’est très simple, il suffira juste d’ouvrir, dans votre navigateur, et bien l’URL, de copier cet URL et puis de venir ici insérer le script, directement, donc on va utiliser, ici, une balise script avec bien évidemment un src, comme-çà, et puis on va fermer cette balise script, tout simplement, voilà, "script" et vous mettrez à l’intérieur "vue.js" qui est, hop, directement le lien vers le CDN. Ça, c’est une des possibilités. Y’en a une autre, c’est d’utiliser bower. Alors vous pourriez, si vous le souhaitez, utiliser bower. OK, on va se rendre dans le document dans lequel on travaille – alors pour moi, c’est dans mes Documents, dans mes projets et le dossier vuejs –, et puis ici, je vais utiliser bower. Alors si vous l’avez, vous pouvez le vérifier très facilement, il suffira de faire un "bower –v", si vous ne l’avez pas, vous pourrez faire un "npm install –g de bower" pour installer bower. Alors faites attention à pas vous tromper comme moi, c’est "npm" pas, forcément, un "bpm", bpm, c’est autre chose. Donc "npm install –g bower", vous allez pouvoir l’installer. Si vous êtes comme moi sur un système qui est un système UNIX, vous n’oublierez pas d’avoir les droits d’accès en (root ?), il faut absolument le faire donc avec sudo, vous préfixez votre commande par sudo, vous installez bower de façon globale et vous aurez ensuite accès à bower. Donc si on fait un "bower –v", normalement, on devrait avoir accès à bower. Alors bower, qu’est-ce que ça permet ? Bien ça permet d’installer les librairies de façon locale mais tout en sauvegardant ces informations. Donc ça veut dire qu’on devra commencer par un "bower init" pour initier le projet, alors là vous pouvez faire entrer sur absolument tout, c’est pas très grave, et puis ensuite, vous ferez un "bower install de vuejs". Ça vous installera la dernière version de vuejs dans un dossier, alors attention ça va être vue.js, évidemment, si ça ne marche pas, vous allez regarder sur le site, on vous le dit tout en bas, ah c’est "vue", voilà, c’est moi qui fais des bêtises, donc c’est "vue", "bower install de vue", ça va vous installer, via bower, "vue" dans un dossier bower_components, que vous avez là, bower_components qu’on a ici, ça vous permet, du coup, de versionner un petit peu les paquets, vous avez un PowerPoint.json et si vous voulez le garder de côté, vous pourrez utiliser "--save" qui vous permettra de l’installer et de le garder de côté dans votre fichier bower.json, vous voyez ici vous avez la dépendance à vue qui vient d’être créée et une fois que vous avez fait ça, ce qui veut dire que vous pouvez tout de suite venir ajouter vue.js, le script, depuis son installation, donc ça va être bower_components vue et dist, qui est la distribution, là vous avez la version classique ou la version min. Alors, comment on va l’utiliser ? Bien ça va être très simple, on va simplement lui dire ici "bower_components/" ensuite on va aller chercher "vue/dist/vue.js". Alors quand vous utilisez cette méthode, c’est-à-dire le fichier que vous avez ici, dans votre dossier de travail, je vous conseille quand même de tester votre page, donc de l’ouvrir avec un navigateur, il suffit de demander de Révéler dans le Finder, vous allez avoir ici, hop, cette information et puis, vous allez pouvoir faire une ouverture avec un navigateur et là, vous vérifiez surtout bien dans votre console développeur, c’est ça le plus important, que vous avez bien, ici, dans la console développeur, avec les Outils de développement, que vous avez bien la source qui est chargée, donc vous pouvez le vérifier facilement, il suffit de recharger. Si vous avez un problème pour le télécharger, il va vous le dire automatiquement, sinon, vous verrez que vous avez bien, au niveau du network, vue.js qui se charge sans aucun problème ; donc voilà, vous avez bien un script de chargé. Vérifiez tout le temps parce que des fois, on se trompe sur le chemin, ça arrive et du coup on ne l’a pas. L’installation de vue.js est très simple. Donc il vous suffira simplement de télécharger le fichier ou alors de le récupérer par bower et puis de venir l’utiliser. La version CDN marche aussi. Cela dit, cette méthode-là de téléchargement par bower, elle est quand même mieux, tout simplement parce que si vous devez travailler sur votre projet à l’extérieur sans connexion Internet, là, c’est du local, vous avez la bibliothèque de façon locale, alors qu’en CDN, il vous faudra forcément une connexion Internet.

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 !