This will be a series of articles where you will understand all aspects of Vue.js to build a production ready app. If you haven't read the other articles, do give a read. Part 2 - Structuring & Authentication In Vue.js Part 3 - Making CRUD App in Vue.js

This article will cover the what, why, basic and deployment of simple Vue.js app on AWS and is meant for absolute beginners to Vue.js.

What is Vue?

Vue (pronounced /vjuː/, like view) is a progressive framework for building UI and also can be used to target native. Unlike other monolithic frameworks, Vue is an incrementally adoptable ecosystem that scales between a library and a full-featured framework.

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.

Why should we use Vue not React or Angular?

We are in the era of the modern javascript frameworks, every day a some new framework popups out. Infact, we already have frameworks like React and Angular which are backed by tech gigs like Facebook and Google and having a good community support.

If you study about the Angular it’s a MVC based framework which lacks Virtual Dom and while React on the other hand is just a View Layer but got Virtual Dom. So, here comes the Vue which provides two way data binding like Angular and virtual Dom support like React. It’s just learning from the mistakes of others which makes it better as compared to the others. Even if you see the Present Github Stars of React and Vue and Angular, the Vue is leading the other too, which simply signifies that the Vue is accepted by the js community.

You can read this awesome article to get your why.

Library size ⏲️ comparison

The sizes of the libraries are as follows:

Angular: 500+ KB

React: 100 KB

Vue: 80 KB

Enough of theory, let’s start doing some stuff

Env. Setup

Install Node.js

Once you have Node.js installed, check Node.js works by running below command

node -v

Next step is to install vue-cli which is a command line helper for generating and managing Vue.js applications.

npm install -g @vue/cli

Check vue-cli works by running

vue --version

Getting Started With Project

Let’s generate a Vue project, by running below command and following the cli interface.

vue create my-project

Once you are done, you will see a project created in the same directory where the command was ran.

Next run the following command

cd my-project npm run serve

and you will see the below