Getting started with Vue JS

Hello World!

I just had to open with the most famous programming line since this is my first piece on educative.

Vue is a javascript framework for building user interfaces. It is capable of powering sophisticated Single -Page Applications (SPAs). It is one of the three most popular modern JavaScript frameworks, with the other two frameworks being Angular and React.

Vue has a reputation of being fairly easy to grasp and as straightforward as it gets when it comes to writing code. It can also be used to target Native when used with a combination of other libraries and tools.

Now, let’s get started setting up our first Vue project.

Environment

In order to get Vue (or any of the Javascript framework) working on your machine, you must first install NodeJs and NPM.

NodeJS is a Javascript runtime capable of running Javascript code outside of a browser.

NPM, which is an abbreviation for Node Package Manager, is used to install and manage dependencies used in the project. It will be installed alongside Node.

To install Node locally, visit the official website downloads page and choose the download best suited for you, whether on a PC or Mac. It is preferable to download the LTS (Long Term Support), which is the most stable version at this point.

At the time of writing this, the LTS version is v12.13.0.

The installation is pretty straight forward, accept all the defaults and click on finish/done to complete.

To check if it is installed on your machine, open up your CLI and run the following command:

node -v

you should see a version number of:

12.13.0

also, run this to check your npm version:

npm -v

your result should be:

6.12.0

Note that if you already have Node installed,​ your version number might be different, which is perfectly okay.

Now, to install Vue itself while still in the terminal, run the following command to install the Vue CLI

npm install -g @vue-cli

npm is our package manager, install is the action in this case, -g stands for global(this will allow us to access the vue-cli from any folder on the machine), and @vue-cli is the name of what we are trying to install.

Check your Vue installation by running:

vue --version

In the next shot, we will take a look at creating a new Vue project and dissect the project files.