How to Setup a Development Environment for Vue.js

In this article, I’m gonna explain, how to set up a development environment for Vue js. So let’s begin.

First of all, we need two things to be installed in our system before starting.

1. Node
2. The text editor of your choice

For Node, download the latest stable release of the Node from here. For a Text editor, I personally suggest VS code that you can download here.

Add Vue

Let me tell you that there are four ways to add Vue to your project.

1. CDN Package
2. npm
3. Vue CLI
4. Vite

I’m gonna describe Vue CLI, the 3rd way, to add Vue to your project. CLI stands for the command-line interface. Executing by 2 commands, You can have an entire Vue project up and running. So let’s start, Open the command prompt or command prompt terminal in VS Code and execute the below commands.

To Install Vue Globally

Execute the below command to install Vue globally. After that, you don’t need to install Vue again for other projects.

npm install -g @vue/cli

-g will install Vue globally.

To Create a Project

Go to the folder where you want to create a Vue project and execute the below command.

vue create hello-world

For Example

vue create <your-project-name>

To Run The Project

To run the project, execute the below command one by one.

cd <your-project-name>
npm run serve

For example

cd hello-world
npm run serve

Demo

Here, directly I’m creating a project because I have already installed Vue globally in my system.