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

Structurer le projet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Étudiez la manière dont le projet Vue.js est structuré. Vous utiliserez cette structure tout au long de cette formation.
04:41

Transcription

Comment est organisé la structure de ce projet qui a été généré ? Alors on trouvera plusieurs dossiers. Il n'y en a pas beaucoup qui vont nous intéresser vraiment, à part si on part après dans la configuration. Il y a le dossier build. Alors le dossier build qu'on a là va contenir tous les scripts qui sont vraiment utiles à la compilation, au fait de servir le projet. On en reparlera un peu plus tard. C'est vraiment de la configuration pure. Dans la plupart des cas vous n'aurez pas besoin de toucher à ça parce que ça va faire tourner votre projet mais votre projet va être organisé par d'autres fichiers. Ce sont les outils de base fournis pour ce projet qui a été créé par webpack et ça va vraiment servir à webpack pour venir démarrer le projet. La config, ça peut être intéressant. On a des fichiers de configuration d'environnement. Il est probable que vous ayez à y toucher à un moment ou à un autre parce que ça vient travailler sur l'environnement notamment quand vous allez démarrer un serveur qui va servir votre site et votre projet. Il y a un port qui est défini ici en tant que 8080 peut-être que vous aurez besoin de le changer. Dans la plupart des cas, non mais il est probable que vous ayez besoin de toucher à ces fichiers-là. Sachez que les variables d'environnement et la configuration se trouvent dans le dossier config. Notre module, peut-être que vous ne l'avez pas, c'est parce qu'il vous manque une commande. Avant même de pouvoir démarrer, travailler avec le projet, il faut lancer à la racine de votre projet un npm install donc faites-le. Lancez bien un npm install pour qu'il installe absolument toutes les dépendances dont il a besoin. A la base quand vous faites le init avec le view cli, il ne vous donnera pas le node_modules parce que ça s'installe après donc il faudra effectuer la manipulation npm install dans le dossier où vous avez le projet rsc est plus intéressant mais je le garde pour la fin... Static, ici on mettra des fichiers dits statics. La plupart du temps, ce seront des pages que l'on veut servir où il n'y a pas du tout de script, ça pourra être mis dans static. Test, ce sont les tests unitaires et les tests utilisateurs. Là vous avez des exemples qui seront intéressants, on ne parlera pas forcément des tests dans cette formation mais sachez que si vous voulez réaliser des tests unitaires ou des tests e2e sur votre application, il y a un dossier prévu pour ça. Puis ensuite vous avez tout un tas de fichiers. Il y a le babelrc qui permet de configurer Babel. Babel le moteur qui est donc utilisé par cette template-là pour venir compiler le javascript ou du moins venir compiler ce qu'on va écrire en es 6 pour le transformer en javascript. L'editorconfig fait vraiment partie de votre configuration. .eslint, eslintrc et lintignore, tout ça c'est soit pour guilt, soit pour les outils qui vont me permettre de vérifier le javascript pour voir s'il y a des erreurs. Tout ça c'est déjà configuré de base. Le package.json va vous permettre de voir tout ce qui se trouve comme commandes, toutes les commandes qu'on a là, qui sont des commandes qu'on va pouvoir utiliser après. On va en reparler évidemment et puis ensuite, vous voyez à l'intérieur toutes les dépendances. Ce n'est pas petit, c'est sûr qu'il y a beaucoup de dépendances en même temps c'est un projet très puissant donc pour le coup il y a de la dépendance vers pas mal d'outils. Ne vous inquiétez pas avec ça. Si vous utilisez d'autres librairies, vous pourrez les ajouter en dépendance ce n'est pas un problème. Bien au contraire, c'est même recommandé, c'est un environnement vue.js qui permet d'être utilisé avec plein de librairies, qui sont des librairies extérieures, bien évidemment. Et enfin, un index.html. L'index.html que vous avez là, vous n'allez pas le customiser plus que ça. Peut-être que vous changerez le titre, que vous ajouterez des informations mais il faut savoir que quand vous allez démarrer le projet réellement avec les outils en ligne de commande, vous allez voir que ça va construire votre projet automatiquement. Il va être construit donc vous n'aurez pas besoin de vous embêter à toucher à ça parce que ça va être fait automatiquement donc on ne touche pas à l'index.html. Alors où est-ce qu'on va coder nous ? On va coder dans src. Dans src vous allez trouver ici un fichier main.js, un fichier App.vue, dans les composants un Hello.vue et dans les assets, un logo.png. On reparlera de ça après puisqu'on verra comment ça se décompose réellement au niveau de l'organisation et vous voyez que la structure n'est pas une structure très lourde, il y a finalement un seul dossier qui va vraiment nous intéresser. Le reste c'est le fonctionnement interne de vue.js sous template webpack. Attention parce qu'en fonction des templates, ce ne sera pas forcément la même organisation. Pour cette formation démarrez votre projet comme moi avec un template webpack. Voilà comment ça se structure. On va aussi voir ce qu'on y trouve et comment c'est composé, de quoi c'est composé, comment on travaille réellement avec vue,js.

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 !