Getting Started With Vue.JS

In this article we will learn about a progressive framework known as Vue. We will also learn about the basic concepts of Vue and how to create a new Vue project. We will also understand the basic concepts of Vue. This article is for the beginners to Vue but it is expected that you have  knowledge of HTML, CSS and JavaScript for getting started with the Vue framework.
 

What is Vue?

 
As per Vue's documentation, Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
 
Installation
 
For creating a Vue project let's first setup the environment to create a Vue project if you already have the basic setup in your system then you can skip this step. We would require Node.js installed in our system so that we can execute the JS code.
 

Node.js Installation

 
Download Node.js from its official website as per your operating system. Click on “Recommended for Most Users” to download the stable version. You can also install nvm for switching between multiple npm versions.
 
	Getting Started With Vue JS
 
Npm includes a tool known as npx that runs the executable packages. Npx will help to create a react application in the directory that we run the command. We can create a new project by running the npx command which will also install the required dependencies. In simple words, npx is a package runner tool that’s included in npm. 
 
To check the version of the node run the command 
 
Node –v 
 
To check the version of npm run the command
 
Npm -v
 

NVM 

 
To download NVM visit the link and download the nvm-setup.zip file.
 
	Getting Started With Vue JS
 
Once the file is downloaded open the folder and run the file nvm-setup.exe file. Follow the steps and go through all the steps required for setup. 
 
	Getting Started With Vue JS 
 
Click on the Next button and follow the steps required.
 
	Getting Started With Vue JS 
 
As you follow the steps you will finally come to the window asking for installation. Click on the install button to install your NVM setup. 
 
Once the installation is complete, let's check for the versions of the node available in our system. To check that use the command
 
nvm list 
 
This will show the list of all the installed versions of the node. Currently, in my system, only one version is installed that is 10.15.1
 
	Getting Started With Vue JS 
 
To check for all the versions available run the command,
 
nvm list available
 
	Getting Started With Vue JS 
 
There are multiple ways for integrating Vue in our projects, we can follow as per our project requirements. Three ways are listed below to add Vue to our projects,
 
Using CDN
 
We can add the script tag in our development environment and start 
 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
If we want to use the CDN approach in our production environment then we can add the script
 
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 
Using npm 
 
To install Vue using npm we need to use the command 
 
npm install vue@next
 
Using is approach when we want to build large scale applications as webpack or Rollup module bundlers can nicely be paired with it.
 
Using CLI
 
For using this approach, we need to have the Node.js installed in our system. We will be using this approach to create our application. Let's start installation of Vue-cli in our next section.
 

Installing vue-cli

 
As per Vue documentation, Vue-cli provides quick scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. 
 
Command to install Vue-cli
 
npm install -g @vue/cli
 
To check the version of Vue run the command where the flag “V” stands for version. We can also use –version flag instead of –v.
 
vue – V
 
	Getting Started With Vue JS 
 
By running the command, we are able to get the version of Vue cli installed in our system, so now we have environment ready for creating our first Vue project. Let’s create our first Vue project.
 

Creating new Vue project

 
To create a new Vue project navigate to the directory in which we want to create the project. Open command terminal in that folder and run the command 
 
vue create project-name
 
Here “project-name" is a variable where the user can provide the project name as required. In our case we have named the project as getting-started so instead of project-name we will provide getting-started. The command will look like,
 
vue create getting-started
 
As we run the command, a list of options will appear. There will be three options such as babel and eslint with version 2 of Vue, babel and eslint with Version 3 of Vue and manually selecting the features. Here we will select the latest version of Vue, that is Vue3. To select the options, use the up and down arrow keys. Click enter as your arrow points to the desired option.
 
	Getting Started With Vue JS 
 
As the project generation completes you will see a directory created with the project name as the name of the directory. Navigate to the directory using the command,
 
cd getting-started
 

Exploring the Project structure

 
The project created has the default project as shown in the image below,
 
	Getting Started With Vue JS 
 
Let’s try to understand the project structure. Main.js file is the entry point of the project that has the to create a Vue application. The Main.js file is as shown below,
 
	Getting Started With Vue JS 
 
Here it imports the CreateApp from the vue that is used for creating a new application. App is imported from the App file located in the src folder. Let’s have a look at the code of the App file.
 
	Getting Started With Vue JS 
 
Here the template section includes the html that will be viewed by the user. Scripts section includes the life cycle methods, variables and other logics used in the app, and at last the styling section includes the styles for the component. The approach that is generated is known as single file component. 
 
Package.json file includes a JSON object that contains the dependencies required for our project, scripts used to run our project and other required project configurations. 
 

Running the project

 
To run the project let’s not make any changes and see how the default project looks. To run the project let's run the command
 
Npm run serve
 
Run this command and wait for the project to compile successfully. As the project compiles successfully we would be able to see some message as shown below,
 
	Getting Started With Vue JS 
 
Visit the url http://localhost:8080/ to see our project running on development server. This will be the landing page of the default project that we created. 
 
	Getting Started With Vue JS 
 
Try to create any changes in the App component’s template section such as adding any HTML tag or modifying the text in the template and save the file. The browser window will refresh automatically as we save the file and we will be able to see our changes in the browser.
 

Summary

 
In this article we learned about Vue framework and how to create applications using vue-cli. We also learnt about installing Node and NVM in our system to setup the development environment. We also tried to understand the basic structure of the Vue component file and the sections in the single file component. We also learned how to run the project in our system.