How to install and setup Vue.js Project Using Vue/cli

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

There are many ways to install Vue.js. Some of the ways on how to carry out the installation are discussed ahead.

1. Using CDN
2. Using @vue/cli(NPM)

Here I have showing you to a second way using @vue/cli(NPM)

Vue creator, Evan You, described version 3 of the CLI as a “completely different beast” from its predecessor. As such, it’s important to uninstall any previous version of the CLI (that is, 2.x.x) before preceding with this article.

1) Install 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.

2) Install @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.

3) Create new Vue.js project

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

• 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.
  
• npm run serve This command will allow you to run local development server from  http://localhost:8081/ address. If you use your web browser to navigate to this address, you should see the below page:

4) Vue.js user interface

• The development server supports features like hot code reloading, which means you don’t need to stop and start your server every time you make any changes to your project’s source code. It will even preserve the state of your app!
• And when you’ve finished developing your project, you can use the following command to build a production bundle:
• Command : npm run build
• Write the following command for open your project in visual studio code
• Command: code <space> dot

5) Your vue.js code file