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.
- Start by installing Node.js with your appropriate operating system.+
- To make sure you are using node version 8.9 or above, run
- 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.
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!
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!
Now back to your preferred text editor. The file structure of your app should look something like
For the moment, the only folder you should worry about is the src. Within the src folder, it should look something like
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
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.