Create your first Vue.js application in under 5 minutes

2 min readFeb 8, 2021

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.

Why Vue?

Low complexity: Standard HTML-based templates which makes it easier to use and revamping the existing application.
Lightweight: weighs around 20kb and has a rendering layer that is written using a lightweight Virtual DOM implementation.
Well-written Documentation

When To Use Vue.js?

When you want lightweight, faster, and modern UI library for crafting an awesome SPA. It’s easier for developers who come from a HTML background and are skeptical about modern JS frameworks.

Prerequisites

Node JS (Installation steps here)
Vue CLI (Installation steps here)

Project Setup

Creating new project

$ vue create hello-vue

You can choose the default preset which comes with a basic Babel + ESLint setup

sample logs

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? YesVue CLI v4.5.11
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: NPMVue CLI v4.5.11
✨  Creating project in D:\workspace\vuejs\hello-vue.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...> yorkie@2.0.0 install D:\workspace\vuejs\hello-vue\node_modules\yorkie
> node bin/install.jssetting up Git hooks
done> core-js@3.8.3 postinstall D:\workspace\vuejs\hello-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"> ejs@2.7.4 postinstall D:\workspace\vuejs\hello-vue\node_modules\ejs
> node ./postinstall.jsadded 1243 packages from 948 contributors in 203.829s64 packages are looking for funding
  run `npm fund` for details    Invoking generators...
    Installing additional dependencies...added 53 packages from 36 contributors in 44.516s69 packages are looking for funding
  run `npm fund` for details⚓  Running completion hooks...    Generating README.md...    Successfully created project hello-vue.
    Get started with the following commands:$ cd hello-vue
$ npm run serve

Starting the application

$ cd hello-vue
$ npm run serve

Startup logs

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.112:8080/

On accessing http://localhost:8080/ in the browser you will see the below page

Happy learning!