Setting Up Windows for Web Development with Vue.js

Git, node, npm, nvm, vue; there’s quite a bit of setup needed. Here’s a uber-quick guide to set it all up if you’re in a rush.

Photo by Irvan Smith on Unsplash

Firstly, the Vue.js documentation is actually quite well made, if you can spare time and want to know things in depth follow that instead here
https://v3.vuejs.org/guide/introduction.html

Step 1-Get Git with Git Bash for Windows

If you are working in teams or want maintain a healthy level of version control of your project, git is the easiest way.

Follow this tutorial I made to set up git on windows

Setup Git on Windows 10

Step 2-Get nvm, but specifically nvm-windows

‘nvm’ or Node Version Manager will let us install node, npm and allow us to change versions depending on what our application’s build is.

Apparently nvm is only for Mac and Linux, and nvmw is specific to windows.

2.1 Check if you already have Node.js and NVM for Windows

Open up git bash, type

nvm -v

if this returns a version number, skip to the next step, else

node -v

if this returns a version number, we need to uninstall it first, then install NVM

“Uninstall any existing versions of Node.js before installing NVM for Windows (otherwise you’ll have conflicting versions). Delete any existing Node.js installation directories (e.g., “C:\Program Files\nodejs”) that might remain …”

follow the steps from this section: https://github.com/coreybutler/nvm-windows#prerequisite-uninstall-existing-node--npm

2.2 use the NVM Installer

from this section: https://github.com/coreybutler/nvm-windows#install-nvm-windows

Step 3-Get Node.js, npm, io.js

Node.js will be the backend runtime environment handling the vue application. ‘npm’ is the Node Package Manager. Different apps need different node.js versions, nvm will help us here.

3.1 Install Node.js and npm directly from the website

https://nodejs.org/en/

3.2 Install other versions of Node.js if needed

nvm install 14.15.4

3.3 Change Node.js versions if needed

nvm use 12.20.1

typing nvm -v should list the new version, typing nvm list should list all the versions you have installed

3.4 Install io.js

Why do we need io.js ?— good question, I ran into issues with io.js versions sometime ago, and I can’t remember why :S
Feel free to skip this, but if you hit a snag (your app will complain on serve) install it with nvmw (with whatever version your app complains with) like so:

nvm install iojs-v1.0.2
nvm use iojs-v1.0.2

Step 4-Install Vue

Use npm to install vue like so:

npm install vue@next

You can check the vue version by typing vue --version

Step 5-Install Vue CLI

Vue CLI or the Vue command line interface will be let us make the application, individual components, set up builds, etc.

npm install -g @vue/cli

Step 6-Working on an Existing Vue Application

You should now be able to work on an already made application. Use the git clone commands and follow the README file to serve your application locally.

Follow the official documentation to create/edit stuff.

Step 6-Creating a new Vue Application

Follow this tutorial I made for making new apps:

Starting a new Vue.js Project

And, your web app will be served in no time :)