Vue.js for Beginner / Pour débutants (Part. 1) ✔️ | 2019 | EN/FR 😎
Part. 1 : Installation Vue 3 and Push on Github
EN : If you have not read my introduction to this tutorial, I invite you to read it now, I present the full program
FR : Si vous n’avez pas lu mon introduction à ce tutoriel, je vous invite à aller la lire dès maintenant, je présente le programme complet
EN : The goal of this tutorial is not to present Vue.js, its history or compare it to these competitors but simply to explain how to easily learn the basics and try to go further and further to each tutorial
FR : Le but de ce tutoriel n’est pas de présenter Vue.js, son historique ou le comparer à ces concurrents mais simplement de vous expliquer comment apprendre facilement les bases et essayer d’aller de plus en plus loin à chaque tutoriel
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)
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
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_NAMEFor 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@latestEN : 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
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
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 uiGo to the http://localhost:8000 to see the interface
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-initYou can init a “Vue 2.0 Project” with :
vue init webpack PROJECT_NAMEEN : 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 installEN : 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
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 :
npm audit fiIf you want to start your project :
npm run serveEN : You can now initialize a github directory within your project by executing the command
FR : Vous pouvez maintenant initialiser un répertoire github au sein de votre projet en exécutant la commande
git init😊 NOW : Go on Github
Choose a name
Select “Public”
And don’t create a Readme file
EN :
Create a readme file from the console (1)
Add all the files of your project to send them on Git (2)
Create a Commit with message (3)
Select the good origin (4)
Push this commit into your new directory (5)
FR :
Créez un fichier Readme à part de la console (1)
Ajoutez tous les fichiers de votre projet pour les envoyer sur Git (2)
Créez un Commit avec message (3)
Sélectionnez la bonne origine (4)
Poussez ce commit sur votre nouveau répertoire (5)
git add README.md (1)git add . (2)git commit -m "Initial Commit" (3)git remote add origin https://github.com/YOUR_NAME/vue-tutorial.git (4)git push --set-upstream origin master (5)
THANKS 😊
EN : The next step: Installing the main dependencies and discovering the most useful tools
FR : La prochaine étape : Installation des dépendances principales et découverte des différents outils
→ PART . 2 ←
CLAP — EMAIL ME — CONTACT ME ON LINKEDIN — SHARE THIS ARTICLE
😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀
