Setup Vue.js Hello World In Visual Studio Code | by Ryan Gleason | Towards Data Science

Launch a simple Vue application after setting up a local development environment.
These are the tools you will install throughout the duration of this tutorial:
Visual Studio Code (VS Code): This certainly isn’t a requirement for creating Vue applications, but it is my recommended text editor. I believe it makes software development a lot more enjoyable and productive.
Git Bash: Git is a very popular tool used to manage source code, especially if you are working on a large development team. VS Code allows you to integrate a Git Bash terminal, and this makes pushing your code to Git repositories very convenient. Also, it lets you use most standard UNIX commands with the emulation of a Bash environment.
Node.js: the JavaScript runtime environment
npm: the Node package manager. This is used in conjunction with Node.js so that we can easily share packaged modules of code.
Download the stable build from Visual Studio Code.
This is a very easy download. Microsoft has done a good job of simplifying the installation process for this application.
Download Git Bash from https://git-scm.com/downloads for your specific operating system.
As you are clicking through the Git installer, I suggest using all of the default installation settings unless you really know what you are doing.
We are now going to add Git Bash as an integrated terminal inside of VSCode.
Open a new terminal in VS Code (Ctrl + Shift + `) or Terminal → New Terminal.
Open the command palette (Ctrl + Shift + P) or View → Command Palette.
Type “Terminal: Select Default Shell”.
You should see the options below:
Select Git Bash.
Select the + button in the terminal window.
You should see something like this.
Checkpoint: Type in the following command to ensure you have correctly installed Git.
git --version
Depending on what version you have installed, this should appear.
Go to this link to download: Node.js.
I selected the “Recommended For Most Users” option and then used all the default settings in the Node.js setup.
Checkpoint: Once it has finished installing, type into your command line:
node -v && npm -v
And it should look like this (your versions may be more recent than mine):
If you successfully installed Node and npm, skip to the next section.
If it doesn’t show up in your Git Bash, don’t fret! Restart your computer.
If that doesn’t work, type the same command into PowerShell or just your Windows command line and you should see it there.
To use Git Bash, you’re going to need to add it to your PATH. The PATH tells your operating system where to look for executable files in response to commands from a user. Below is how you do that on Windows:
Open “View Advanced System Settings”.
Click “Environment Variables”.
Under System Variables, select Path and then the Edit button.
Add this C:\Program Files\nodejs\.
If the above file path isn’t correct, you can easily find it by typing this command into your Windows command line:
where node
Select OK after retrieving the correct path to the Node directory and adding it to your Path system variable.
Restart your computer again.
Checkpoint: Now, try typing the following commands into Git Bash:
node -v && npm -v
Type the following command into the command line.
npm i -g @vue/cli
Once this is complete, we will create our project:
vue create hello-world
I chose the preset
Next, change directories into your new project, and start it up!
cd hello-world && npm run serve
Navigate to localhost:8080 and you should see something that looks like this:
And that’s it! We did it.
You’ve just installed the following tools to get you started creating Vue.js applications.