How To Install And Setup Vue.js

In this article, we will learn about installing all package of Vue.js and setup new Vue.js application.

Roadmap for setting up Vue.js

• Install the latest version of Node.js
• Installing @vue/cli
• Creating new Vue project
• Taking a look at Vue user interface.
• Folder structure for Vue.js project

Install the latest version of Node.js

• You can install latest version from https://nodejs.org/en/
• After successfully installation of Node.js open Command Prompt and check your Node.js latest version.
• In Command Prompt write the following command for checking the latest version of Node.js
• Command : $node -v.

Installing @vue/cli

• In order to use the @vue/cli, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended).
• write the following command for installing Vue.js user interface/application
• Command : $npm install -g @vue/cli
  

• Write the command for getting latest version of @vue/cli – Command : $npm -v
• Once it is installed, you’ll have access to the vue binary in your command line. We’ll use this to create our project.

Creating new Vue project

• There are two way for creating Vue project. With the newer Vue UI, or directly from the command line, which we’ll do now with:
• In CMD write the command for creating Vue project
• Command Syntax : vue create projectname

• Remember project name should in lowercase letter.
• By pressing enter below dialogue will prompt in CMD.

• Select Default option from other option and By pressing the enter you will get below message in CMD

• After Type npm run serve in CMD and you will get following output in CMD

• Open your browser and write your Local URL
• Finally You can see the Vue user interface

Taking a look at Vue user interface.

• Write the following command for open your project in visual studio code
• Command: code <space> dot

Folder structure for Vue.js project