Discovery and install of VueJS

Hello everyone and welcome to this first tutorial on vueJS.
View CLI, allows you to install your development environment vueJS in 2 minutes. We will see in this tutorial how to install it and how to use it.

VueJS what is it?

View JS is a Javascript framework that will allow you to develop "Single Page Applications", ie applications that are made with responsive javascript, in short and simple, applications that can run without reloading the page at each interaction (mainly with AJAX calls) that allow the user to have a very pleasant and very modern user experience.

VueJS was developed by Evan You in 2014, which after working at Google on AngularJS decided to make its own javascript framework that will make reactiveJS easier for developers. VueJS is the Github's project which was recently presented as the project being the most popular open source project surpassing Angular2, backboneJS or even jQuery.

For the developers that you are, this will allow you to manage your applications as an object with attributes etc ... which will greatly facilitate your life to realize your javascripts components. In addition, you will be able to react your page "live" by mapping your forms with the attributes of your objects for example (we will see later in more detail all these notions).

Usually vueJS applications will work by exchanging with your server via REST APIs. This will allow you to be able to separate your developments when creating your applications.

Installing VueJS

This tutorial is made on Ubuntu but you can adapt on your own.

To install view-cli, you will need to install first npm:

sudo apt-get update
sudo apt-get install nodejs npm

Then to install view-cli:

npm install -g vue-cli

You will then have access to the view command:

pierre@mypc:~/vuejs$ vue

  Usage: vue <command> [options]

  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

To initialize the environment you will use the following command:

pierre@mypc:~/vuejs$  vue init webpack pierre

The first argument is the template, here "webpack". The second is the name of your project, here "pierre". Then answer the questions, like this:

pierre@mypc:~/vuejs$ vue init webpack pierre

  This will install Vue 2.x version of the template.
  For Vue 1.x use: vue init webpack#1.0 pierre
? Project name pierre
? Project description A Vue.js project
? Author pierre <pierrefay@myemail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "pierre".
   To get started:
     cd pierre
     npm install
     npm run dev
     
   Documentation can be found at https://vuejs-templates.github.io/webpack

Your project is now initialized. So you can go into the folder "pierre" where your files are, and make an "npm install" that will allow you to install all the components needed to run your project.
The "npm run dev" command will then allow you to run all the tasks of your project (in particular ESLint). We will return to these commands later in this article.

The structure of my VueJS project

When you go to the directory of your project (here "pierre") you can see different folders:

- build /
This folder contains the configuration for the development and production server. Theoretically you should not modify this file.

- src /
This folder contains your VUEJS code, it is you who define how your application is structured within this folder ... this is where you will put your code.

- static /
It is this folder that contains the "Assets", ie the images, js and css files of your application.

- test /
This folder contains all the files relating to your unitary and functional tests.

- package.json
This file is used by NPM to define the dependencies of your applications.

- index.html
This is your default page, it is it the page that contains your vueJS application.

- config /
This is the folder that contains several important configuration files for your application.

Useful commands to work with VueJS

For development, we launch its local server node.js which make it possible to run Lint and the different components necessary to run our application vueJS:

pierre@mypc:~/vuejs$  npm run dev 

Once the development is complete, we want "to build" our application. This means minimizing JS, CSS etc ... if you have defined this processing and doing all the important tasks to be able to put into production our code. We will therefore issue the following command:

pierre@mypc:~/vuejs$  npm run build 

These two commands already exist. We will not talk about the tests in this part, no need to complexify the subject at this stage, it is already complex enough to start with vueJS.
Now that you have installed your environment to work with VueJS, let's start coding! Rdv in the next tutorial.