EN : To start you only need 2 things: Node.js and an IDE (text editor), I highly recommend Visual Studio Code (it is lightweight, has many extensions, and is quite fashionable in this moment)

FR : Pour commencer vous n’avez besoin que de 2 choses : Node.js et un IDE (éditeur de texte), je vous conseil fortement Visual Studio Code ( il est léger, dispose de nombreuses extensions, et il est assez à la mode en ce moment)

Node.js Website

Select your device. For me, it’s Windows 10 ( 64 bits)

EN : There are two versions: The current version (less stable) and the recommended version (the most stable version).

I advise you to take the recommended version (currently 10.16.2)

FR : Il y a deux versions : La version actuelle (moins stable) et la version recommandée (la plus stable).

Je vous conseille de prendre la version recommandée (actuellement 10.16.2)

EN : There is nothing more to do. From Node you have access to NPM (its package manager, to make it simple it allows to install libraries)

The first one we will need to install is the Vue.js Command Line Interface (vue-cli)

FR : Il n’y a rien de plus à faire. A partir de Node vous avez accès à NPM ( son gestionnaire de paquets, pour faire simple il permet d’installer des librairies)

La première que nous aurons besoin d’installer est la “Command Line Interface” (Interface en ligne de commande) (vue-cli) de Vue.js

For that, open a terminal 😊

npm install -g @vue/cli

EN : Now we can initialize our project (Project Vue and Github directory). For my part I will create a folder / github at the root of my disk in which I will put all my projects

FR: Maintenant, nous pouvons initialiser notre projet (Projet Vue et répertoire Github) Pour ma part je vais créer un dossier /github à la racine de mon disque dans lequel je mettrai tous mes projets

To initialize the Vue.js project :

vue create PROJECT_NAME

For me it’s vue create vue-tutorial

EN : If you have any problem (by example “version missmatch), write this command FR : En cas de soucis de version qui ne correspondent pas, écrivez cette commande :

npm install -g vue@latest

EN : You will receive a request to choose which default template you want to use. (Babel / Eslint or Manuel) choose Babel / Eslint

This will make it easier to find errors in your code. We will come back to this later.

If you take the 2nd choice, it’s nothing, just select“Babel” and “Linter” and add “Router”, “Vuex” and “Unit Testing” for the moment

FR : Vous allez recevoir une demande pour choisir quel preset (template) par défaut vous souhaitez utiliser. (Babel/Eslint ou Manuel) choisissez Babel/Eslint

Cela vous permettra de repérer plus facilement les erreurs dans votre code. Nous y reviendrons plus tard.

Si vous sélectionnez le deuxième choix, ce n’est pas grave, laissez “Babel” et “Linter” et ajouter “Router”, “Vuex” et “Unit Testing” pour le moment

Step 1

EN : A good practice when you use a new very general command like “create vue” is to inform you to know all the parameters that it accepts. (either on the documentation or thanks to the — help argument)

FR : Une bonne pratique lorsque vous utilisez une nouvelle commande très générale comme “vue create” est de vous renseigner pour connaitre tous les paramètres qu’elle accepte. (soit sur la documentation soit grâce à l’argument — help)

vue create --help

vue create — help

EN : vue-cli also provides you with a graphical interface to create your projects and / or add new libraries but I do not like this interface, I find the command lines much faster, and we can see our progress more easily.

FR : vue-cli vous fournit également une interface graphique pour créer vos projets et/ou ajouter de nouvelles librairies, mais je n’aime pas trop cette interface, je trouve les lignes de commandes beaucoup plus rapide, et on voit plus facilement notre avancée.

vue ui

Go to the http://localhost:8000 to see the interface

example of “vue ui”

EN : If you have already used Vue.js before. (Version less than 3) you know we were using “init vue” to initialize a Vue.js project. You can find this command by installing:

FR : Si vous avez deja utilisé Vue.js auparavant. (Version inférieure à 3) vous savez que nous utilisions “vue init” pour initialiser un projet Vue.js. Vous pouvez retrouver cette commande en installant :

npm install -g @vue/cli-init

You can init a “Vue 2.0 Project” with :

vue init webpack PROJECT_NAME

EN : You can now position yourself in your project and install all the dependencies thanks to the command

FR : Vous pouvez maintenant vous positionnez dans votre projet et installer toutes les dépendances grâce à la commande

npm install

EN : This will install dependencies located in your project’s package.json file, which is the default configuration file

FR: Cela va installer les dépendances situées dans le fichier package.json de votre projet, qui est le fichier de configuration par défaut

npm install

EN : You should not have any worries after installing the main dependencies. But if you have vulnerabilities, do not hesitate to carry out the following command to correct dependency concerns:

FR : Vous ne devriez pas avoir de soucis après l’installation des dépendances principales. Mais si vous avez des vulnérabilités, n’hésitez pas à réaliser la commande suivante pour corriger les soucis de dépendances :