How to Set Up Vue.js Application on Windows?

Last updated on September 22, 2022

In this article, we will learn how to set up Vue.js on your operating systems like Mac, Linus, or Windows. To set up vue.js, we need to install node.js. So go to the node.js website and download the installer file that suits your operating system. In my case, I need a .msi file for installing the node in Windows.

Once it is installed, you can check the node version. To check out the node version, open CLI (command line interface) and type npm -v that shows the node.js version.

What is NPM?

NPM is the node package manager that manages installation for the JavaScript platform. Here we will be using npm for installing packages. Below is an example command that installs the package.

npm package-name install

Install Vue CLI

Next, you need to globally install the Vue CLI package that allows you to use the Vue command in the terminal.

npm install -g @vue/cli

The above command will install Vue CLI globally and it will also install the Vue application automatically. You can also install the Vue application through the below command

vue create your-project-name

During the installation, it will ask you questions. You need to answer as per your application requirements.

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Vue.js also allows you to select features manually. If you select Manually select features then Vue will provide a few features which you can select for your Vue application.

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

You can run the Vue.js application in the browser, once it is created. Run the below command to enter in Vue.js application

cd your-project-name

Then run the below command that serves the application on the development server and also provides a URL to open in the browser.

npm run serve

Next, open the URL http://localhost:8080 in the browser.

Conclusion

In this article, we learned to install node.js and set up the Vue.js application on Windows. If you would like to learn more about it, check out our Vue.js page.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on:

How to Set Up Vue.js Application on Windows?

What is NPM?

Install Vue CLI

Conclusion

Ayaz Ali Shah

Recent Posts