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.
- Node
- 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.
- CDN Package
- npm
- Vue CLI
- 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.
