What is Vue.js?
Vue was created back in 2014 by Evan You and has evolved very much since then. If you want to learn more about the framework or just check out their website you can find it here: vuejs.org.
Setting up the project
In this getting started course we are not going to cover installing Vue.js through the Vue CLI, but instead, we are just going to include Vue.js directly in our browser. We want you to get started with code as soon as possible and feel that this is a good way to start.
So the first thing we are going to do is to set up a HTML-file. You can begin by creating a folder named vuehero somewhere on your computer and create a file inside that folder called index.html. The code for this file is going to look like this.
The reason why I show the code as a picture instead of just a regular code block is because I want you to actually have to write the code and not just copy it. By doing this you'll be learning much better. Vue should now be set up in your index.html file and if you open it in your browser you should see a boring white screen, we'll do something about that very soon!
Creating a Vue instance
The Vue instance that we are going to create will be the root of our app. A Vue instance can be very simple, but it can also be very complicated because we can pass in huge amount of optional parameters. Here is the code for setting it up.
If you go to your browser now and refresh / open the index.html file you should see Vue Hero as a title on your page. And there you go, that is how you create a Vue instance.
Before we continue I want you to do a little challenge. Can you add one more variable (call it what you want) to the data object and show it underneath the Vue Hero title as a paragraph? This will not be a part of the course so when you're finished you can just remove it.