Vue.js Project Setup: A Beginner’s Step-by-Step Guide

Creating a Vue.js project involves several steps. Here’s a step-by-step guide to help you set up a Vue project using the Vue CLI (Command Line Interface), which is the recommended way to scaffold and manage Vue.js projects.


  1. Make sure you have Node.js installed. You can download it from Node.js official website.
  2. Ensure npm (Node Package Manager) is installed, as it comes with Node.js.

Step 1: Install Vue CLI

Open your terminal or command prompt and run the following command to install Vue CLI globally on your machine:

npm install -g @vue/cli

Step 2: Create a new Vue project

Once Vue CLI is installed, you can create a new Vue project using the ‘vue create’ command. Navigate to the directory where you want to create your project and run:

vue create your-project-name

Replace “your-project-name” with the desired name for your Vue project.

Step 3: Project setup

The above command will prompt you to choose a preset. You can either manually select features or choose the default preset. If you are just starting, the default preset is a good choice.

Step 4: Navigate to the project directory

After the project is created, navigate to your project directory:

cd your-project-name

Step 5: Run the development server

To see your Vue app in action during development, run the following command:

npm run serve

This will start a development server, and you can view your Vue app by opening your browser and navigating to ‘http://localhost:8080’ (or another port if 8080 is already in use).

Additional steps (optional):

  • Explore the project structure and files in the created directory
  • Customize your Vue app by modifying the files in the ‘src’ directory.
  • Install additional Vue plugins or packages using npm.

You’ve successfully set up a new Vue.js project using the Vue CLI. You can now start building and developing your Vue application.

Related Posts