4. Touring the project files

Let's do a brief tour of the files in this project now. There are actually only two main files that we're going to be working with to write our Vue app, which are index.html, and, if you go into this public directory, you'll see script.js.


Looking inside script.js, you can see that it currently just has a console.log statement in there to confirm that it's working and being loaded by the browser.

So let's open the developer tools in the browser, in Firefox the shortcut for that is Cmd + Shift + K, and then click the JavaScript console, you should see the "It works" message. This means our script is being successfully loaded and run.


Let's have a quick look at this index.html file, now. You'll see I've provided the basic document setup here including the head with a page title, favicon etc. I've also loaded a few fonts in here and we're linking to a CSS stylesheet as well.

Next, you'll see the body tag here, and inside that you'll notice a div here with ID app. Inside that is where we're going to be creating the template for our Vue.js app.


Finally, at the bottom of index.html, we have two more things worth mentioning.

Firstly, firstly we have this reload script here. This is only used in development, and what it does is, if we make any changes to our main files, for example deleting a fullstop, it will trigger the page to reload. This just helps speed up development a bit.

Then underneath the reload script, we've got a link to the custom script file we just looked at, public/script.js.


Let's take a quick look at the CSS file, public/style.css. We're not going to be writing much CSS, instead, you can see a lot of CSS rules have been defined already.

Throught the course I'll get you to add some of these classes to your template so we can get the benefits of that styling.

Complete and Continue