Vue.js for Beginner / Pour débutants (Part. 2) ✔️ | 2019 | EN/FR 😎

4 min readAug 7, 2019

Part.2 : Dependencies and Tools

EN : If you want to develop an application with Vuejs, you must install the Chrome extension

FR : Si vous voulez développer une application avec Vuejs, vous devez obligatoirement installer l’extension Chrome

“Vue.js devtools”
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 😊

EN : The other tools you will need are VisualStudio Code extensions to make it easier to read, read and correct your code

FR : Les autres outils dont vous aurez besoin sont des extensions sur VisualStudio Code pour faciliter votre saisi, votre lecture ainsi que la correction de votre code

List of most useful plugins 😊 :

Vue 2 Snippets
Vue VSCode Snippets
Vetur => The Most Important

Others useful plugins :

HTML Snippets
JavaScript (ES6) code snippets
Path Intellisense
npm / npm Intellisense
Prettier — Code Formatter
Auto Close Tag
Auto Rename Tag
ESLint

If you want more extensions or customize your VSCode App, go to me tutorial for VSCode Extensions and interface

Main Dependencies 😊

EN : To start we will need several main dependencies. Let’s start with a vu-router of the routing system (page change) of Vue.js. Since we used @ vue/cli to install our project, it is not difficult to import this library, just use the following command at the root of our project:

FR : Pour commencer nous aurons besoin de plusieurs dépendances principales. Commençons par vue-router le système de routing (changement de page) de Vue.js. Puisque nous avons utilisés @vue/cli pour installer notre projet, il n’est pas compliqué d’importer cette librairie, il suffit d’utiliser la commande suivante à la racine de notre projet :

vue add router

EN : A question appears asking if you want to use the “History” vuz-router mode, type “Y” for “Yes”

FR : Une question apparait pour vous demander si vous souhaitez utiliser le mode “History” de vue-router, tapez “Y” pour “Yes”

EN : This updates the tree of your project by modifying your packlage.json and some components so the main file of the application “./src/main.js”. We’ll see later how the Vue.js Router works. I provide you the documentation in any case: https://router.vuejs.org/

Let’s move on to the installation of Vuex. Vuex is a library that allows you to manage the state of your components. It provides Vue.js a global store to your application that allows exchanges between all components (parents and children included)

FR: Cela met à jour l’arborescence de votre projet en modifiant votre packlage.json et certains composants donc le fichier principal de l’application “./src/main.js” .Nous verrons plus tard comment fonctionne le Router de Vue.js. Je vous fourni la documentation dans tous les cas : https://router.vuejs.org/ . Passons maintenant à l’installation de Vuex.

Vuex est une librairie qui permet de gérer l’état de vos composants. Il fourni à Vue.js un store global à votre application qui permet d’effectuer des échanges entre tous les composants (parents et enfants compris)

vue add vuex

EN : The last library we will need is Jest for unit tests (we’ll look at this in the last parts). But not to bother later, let’s set up the library right away thanks to the command:

FR : La dernière librairie dont nous aurons besoin est Jest pour les tests unitaires (nous étudierons ça dans les dernières parties). Mais pour ne pas s’embêter plus tard installons la librairie tout de suite grâce à la commande :

npm install jest babel-jest vue-jest --save-dev

npm install jest babel-jest vue-jest — save-dev (Console VSCode)

EN : Finally, be aware that @ vue/cli automatically creates run and build scripts for your project Vue.js.
They are in the ./package.json file at the root of the project

In the object “scripts” you will find the 2 most important scripts “serve” and “build” which serve respectively to launch the server and to build the application. It is easy to launch them thanks to the commands:

FR : Enfin, sachez que @vue/cli à automatiquement créé des scripts d’exécution et de build pour votre projet vue.js.
Ils se trouvent dans le fichier ./package.json à la racine du projet

Dans l’objet “scripts” vous trouverez les 2 scripts les plus importants “serve” et “build” qui servent respectivement à lancer le serveur et à build l’application. Il est facile de les lancer grâce aux commandes :

npm run serve
npm run build

It’s finish. Now Push on Github :

git add .
git commit -m " Add first dependencies" 
git pus

THANKS 😊

Next Step : Discovering the tree and first component
PART. 3 AVAILABLE FRENCH VERSION & ENGLISH VERSION

CLAP — EMAIL ME — CONTACT ME ON LINKEDIN — SHARE THIS ARTICLE 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀