How To Make a Simple Single Page App with Vue.js Part 1

Why Vue.js?

The open-source Javascript framework Vue.js has been growing in popularity rapidly for quite some time now and for good reason. Vue has a multitude of features that adds huge quality of life that is not offered in other frameworks such as its minimal template syntax or its single-file components. It also offers a very low learning curve making it easy for anyone familiar with HTML, CSS, and Javascript!

What are we making?

So today we are going to be making a simple hello world app with the Vue CLI and in part 2 we will be breaking it down into multiple components! But before we start, we are going to need to install a few things. 

Installation

• Start by installing Node.js with your appropriate operating system.+
• To make sure you are using node version 8.9 or above, run vue --version
• Then within our terminal, we need to run npm install -g @vue/cli

Annnnnd was all set on setting up the CLI! Now we get to create our app.

Creating our app

In order to create a new app in the CLI we need to start by running the command vue create hello-word.

After running this you should see a few options

From here we can decide whether we want to use preset features for vue, or if we would like to manually add or remove some features such as veux or vue-router. For now, though we can just use the defaults. In the terminal, you can select what items you want then hit Enter once finished.

And after a long installation that it!

Running our app

Once you change directories and open the hello-world app you should see a bit of code already laid out for you. In fact if you go ahead and type in your console

npm run serve

and navigate to https://localhost8080 you should be able to see a web-page!

Congratulations you're running your own Vue page!

Creating Our Hello World

Now back to your preferred text editor. The file structure of your app should look something like

hello-word
|-node_modules
|-public
|-src

For the moment, the only folder you should worry about is the src. Within the src folder, it should look something like

src
|-assets
|    -logo.png
|-components
|    -HelloWorld.vue
|-app.js
|-main.js

Main.js is where our Vue app is originally created at the top level. This file calls upon the App.vue component which then calls upon the HelloWorld.vue component. If we click on the HelloWorld.vue file we should see a whole lot of code. This code is whats making up localhost:8080 at the moment. At the top of the page should be a tag name <template>, right below that should be a tag named <div class="hello">. Everything between the tag <div class="hello"> and its closing tag </div> you should be delete. If all is well, we should end up with a blank white web-page with a Vue logo at the center when we navigate back to localhost:8080.Now between the

and the enter <h1>Hello World!</h1>.

After that you should see this screen:

Congrats! You have just printed hello world to the screen in vue.js! For part two I am going to show you how to break your Vue project into multiple components.