DEV Community

Cover image for Vue.js Setup for beginner
bhuvaneshwaran
bhuvaneshwaran

Posted on

Vue.js Setup for beginner

To set up a Vue.js project, you'll need to follow these steps:

Step 1: Install Node.js and npm

Vue.js requires Node.js and npm (Node Package Manager) to be installed on your system. You can download and install Node.js from the official website: https://nodejs.org/

Step 2: Install Vue CLI

Vue CLI is a command-line tool that helps you scaffold and manage Vue.js projects. To install Vue CLI, open a terminal or command prompt and run the following command:

npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a new Vue project
Once Vue CLI is installed, you can create a new Vue project using the following command:

vue create project-name
Enter fullscreen mode Exit fullscreen mode

Replace "project-name" with the desired name for your project. This command will prompt you to choose a preset for your project. You can either select the default preset or manually select features based on your project requirements.

Step 4: Navigate to the project folder
After the project is created, navigate to the project folder using the following command:

cd project-name
Enter fullscreen mode Exit fullscreen mode

Step 5: Run the development server
To start the development server and see your Vue.js project in action, run the following command:

npm run serve

Enter fullscreen mode Exit fullscreen mode

This command compiles the project and starts a development server. You can access your Vue.js application by opening your web browser and visiting the URL provided in the terminal.

That's it! You have successfully set up a Vue.js project using Vue CLI. You can now start building your application by modifying the files in the project directory.

Top comments (1)

Collapse
 
Sloan, the sloth mascot
Comment deleted