How to install vue js project ?

  • 13-05-2022
  • 1490
  • Vue
  • Haresh Chauhan

In this post you will learn how to clone Vue js project in your local system, from the first step to the last step please follow this tutorial and install the project in your system.

Vue js is the latest javascript framework for building front-end big projects with the intention of a single-page user interface. It builds on top standards Using HTML, CSS, and javascript cores, also using Vue CLI you can use other providers like bootstrap, or other you can integrate the packages in the Vue project.

Step 1: Install Nodejs.

Before installing Vue project in our local system we just need to install node packages in our system it is also called js dependency, and that dependency will help us to install npm in our project, the npm (node package manager) is the Vue dependency which will help us to use javascript framework Vue js.

You can Download from by clicking nodejs.

Step 2: Run the command

After install node js, To create a build and enable the Vue project on your machine run the below following given command in your command line tool. So let's create first Vue js project in local system.

npm init vue@latest

Once you enter the above command in your command-line tool, It will ask some questions regarding the Vue project like project name and some other packages, etc...

After entering the above command you will see the interface link given below image.

image

You can see in the image or your terminal that there were asked some dependencies if you are a beginner or not familiar with that please select no option as given in the above image.

After running the command you will init your Vue js project, now you can see in the command line path there where you can see a project folder.

Step 3: Goto Directory

Go to the project directory file.

cd vue-project

In my case, the project name is Vue-project that's why i entered the cd vue-project You need to put as per your project folder given name.

Step 4: npm Install

Once you entered the project directory in your command live tool, now you are in your project. but one thing other than we must require which is npm install.

So after creating the project we need to install dependency in our project. To install it we need to put a command in your terminal.

npm install

Well! now your project is ready to run.

To start our project we need to run a command in our terminal which is npm run dev

Step 5: Run The Project

Following command will run your project.

npm run dev

After entering the command you can see there a localhost URL please copy from there and hit in your browser.

vite v2.9.9 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 338ms.

Once you hit the command you will see in your terminal URL like http::localhost:3000, hit in your browser, in some case it may happen that your port may different form example so please that port with localhost.

Now! you created your first Vue js project in your local system.

in the project src folder components folder inside the ExampleComponent.vue this component run in your browser.

By referring above step you can easy to create Vue project in your local system.

Thanks for reading our post, You can also read other tutorials by scrolling.


We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :