Now, it's time to start going through the actual source code. Now, this is going to be where you place all of your applications logic, so pretty much your entire Vue program is going to go directly inside of this directory. So now let's start walking through exactly what is included in the source directory.

One of the main goals that I want to have for this guide is for you to have a good understanding of the role of the source directory along with the type of files of that make it up. Because then as soon as you become familiar with that, you're going to be able to start navigating through it and understanding why it is structured the way that it is.

Now, the very first directory that we have here is called the assets directory. Now, one thing that I want to make completely clear before we get started, because this is something that I've seen confuse students through the years, is that the way that Vue is set up is it is very flexible.

So, we may have these directories called assets, components and views, but these could all be named whatever we want, and we're going to kind of experiment with that a little bit.

This is a set of conventions that many people in the Vue community follow. However, that is all they are, they're conventions, you could call these things anything that you want, and the system would still work, but it is worth it when you can to follow convention.

Imagine a scenario where you decided to name each one of these directories and these files whatever you felt was the best name for it. And then another developer came and started working on the project, it would take them quite a bit of time to acclimate themselves to your name naming structure.

Whereas, if you follow the industry standards for names, then another developer is going to be able to come onboard and start working on the project right away, they're going to appreciate it and it's going to help streamline your process. And in all software development, that's really the role of why you do want to use conventions.

So with all that being said, let's start going through this assets directory. Now, this is a place where you are going to place static assets. So, a static asset typically is going to represent some kind of image, like we have right here. We have this logo.png, you can click on it and you can see that's a Vue logo.

We're going to reference this here in a little bit, and I'm going to show you how you can access that in the files themselves. And that is the common place to put any static images that you are going to add to your system.

Now, moving down, we have our components directory. Now, because of the way Vue is set up, Vue uses a component driven architecture, which means that pretty much everything in the entire Vue application is a component. So, I don't want you to be thrown off when you see the term components here and think that this is where only components go.

Because as you're going to see in a moment the views directory holds components. And the APP itself, App.vu is a component. So, I don't want you to think that only components can go in here, and all your components have to go in this directory.

What Vue does and the convention that you're going to see quite a bit, if you see something like where you have a directory called components and then views, what that means is that the component represents a piece of functionality. Maybe it's just an element on a page, like a button, or a form field or something, where the views represent actual pages.

Now, the file structure, as you'll see, is very similar but what we have here with the component may only be a small portion of what is seen on a page, where the views directory holds these components, it wraps up all kinds of different components.

So, you can think of it almost like a wrapper component, or a master component, and hopefully that will make more sense as we go through the course. I know if you've never worked in a Vue application system before that they maybe a little bit confusing, but hopefully once we go through it, it'll start to make a little more sense.

Now, let's click on this hello world component here and see what a component in Vue looks like. We have HelloWorld.vue. Now, before we even get into the file I want to point out a few things. The common convention for using any kind of file, especially component file in Vue, is to capitalize the first letter of each word.

So, when you have hello world, the H and the W get capitalized. There are no spaces, no hyphens, no underscores anything like that, and this is the way to name the files so that everyone, when they pick up this application, they're going to know right away that this is a component, and then .vue. So, this is the way that the Vue system, when it compiles, it recognizes that this is code that should automatically pull in the entire Vue library and make it accessible to the file.

So, inside of hello world, we have a few key tags. Now, I want you to ignore this HTML code right here. I want you to first simply look at the template tag, and I'm going to shrink this in VS code just so you don't see all of this. Because I know it can be confusing if you've never seen it before. But a template tag, what this does is this is where Vue is going to make your presentation elements available.

So, this is where you're going to put text, this is where you're going to place your headings, your divs, your forms, everything that a user sees is going to be placed inside of this template tag. So, you can put any kind of html that you want in there and then it will get rendered out.

So, let's play with this here for a second. If I now grow this, so you can see that we have this div with a class. Hello, and it says for guide and recipes on how to configure, and has a lot of content like that. Let's go check in the browser and you can see where it says this, "For guide and recipes for how to configure/customized the project, check out the Vue documentation.

So, we can change this, so I can just say, "Hi there you been changed." Hit save and now if you come back and hit refresh ... Oh, and also make sure that you have your server running. It's been a day since the last recording, so I had to start the server backup. And now if you hit refresh, you can see it says, "Hi there, you have been changed."

So, as you can see that was a one to one mapping between the content in the template tag right here, and then what got rendered out into the screen. Now, we are going to get all into components. We're going to break it down even more later on. Right now I just want to show you the overall structure, and if we come down a little bit that was the template tag and now you can see the next tag after that template tag closes, and all the HTML is gone.

Now we're getting into the Vue and a pure JavaScript code. So, this is the second type of tag you're going to find in a component file. So, you can see we have a script tag that starts here on line 50, goes down to 57, and it says, "export default" and so what this means is that whenever another file pulls in hello world, and we're going to see how we can do that here shortly.

Whenever a file gets pulled in, it is going to take all of the code, all the processes right here. It's going to export those so that they will be available for any other file that needs to use them.

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

So, we're going to see in a second how the homepage is importing this hello world component here, and so it's getting all of this data. It's getting the name so it knows what the name of the component is. It's getting props, which we'll talk about later and what those represent, and then you'll see that you are going to be writing quite a bit of code inside of this script section, and when another file pulls in this component, it gets access to all of that.

Now coming down, we have one other type of tag here and that is the style tag. And we'll talk later in much more detail on how to work with styles, how to use them here directly in the component, but also one thing that you'll see is we're rarely going to keep the styles right in here. Later on you'll see how we can create dedicated SASS and CSS files and then simply import them when we need to, but they show an example here of how you can do that.

So let's just take a look at these. You see how the A links have this kind of green teal text. If you come here, you can see some examples of that. If you wanted to change it, you can just change it to say red, hit save and then you can see automatically all of those links are red. So, that's the way that those are mapped.

I'll change it back and let's go through one more file, and then we'll take a break and then we'll keep going.

So moving down into views, I'm going to skip over the About.vue for a second and I'll move on to the home one, because this is going to be the one that references the hello world component. So, I'm going to close that and now you can see we have the same structure here. It doesn't have a style tag at the bottom, but it has the script tag, and then right above it it has the template tag.

Now, this template tag, even though the home has quite a bit of content, you may notice that there isn't that much content here. It is just a div that wraps up two elements, an image and then the hello world component that we just looked at. So, the image is referencing that logo that we saw earlier, the one that was in the assets directory.

So, the way that you can access any of those images that you place in that directory is you have to provide a valid file path. So, the home component is located inside of views, which means that in order to access assets, we have to jump back.

So, let's kind of take a visual look at how that works, we have this home component right here and assets is over here. What we need to do is we need to tell Vue where the asset is that we're looking for, so, you can see that we have home and in order to jump back, we need to provide those two dots.

So, those two dots is what tells the system that what we're looking for is one level up. And then from there, once we give those two dots, it's almost like we jumped back into the source directory and then from there we called and said, "Okay, we want to go up the chain to assets, and then we want to grab this logo."

So say, and let me show you how this will work, if I go into and create a new folder in assets, and we'll create a folder called logos, and then if I move logo.png up one more. So, now it's no longer just an asset, it's now it's an assets/logos, then what's going to happen here is this is going to break.

So, if I come back here, you can see it says failed to compile, and whenever you see this error, and this is going to be one you will be seeing a lot, because especially if you're a new to building out applications and traversing the file system, it's going to take you a little while to just kind of get used to being able to provide the right path.

So, whenever you see this and it says that, "The module build failed," or couldn't find a file, it usually just means you need to adjust the file path that you're providing. So in this case, we're no longer passing in the exact same path we did before. Now, we have to say assets/logos/logo.png. Now if you hit save and come back, you can see that it's working. So, that path is just telling you where to go find that image, so, that's the first element.

Now, the second one here is the hello world component. Now, this is going to be something that you are going to be doing a lot of, so because Vue is a component driven architecture. That means that the way that you are going to be presenting data and presenting HTML to the users is by passing around these types of components.

Now, it looks very similar to say a div tag, or an A tag, or an image tag, or anything like that. But the way that Vue works, whenever you see these capitals like this and it's the name of a component, that means that we're actually bringing in this entire file here.

So this entire HelloWorld file that we brought in, we are importing it. Now, the import process starts here on line 10, it says, "I want to bring hello world into this home.vue component. And then we also have to list it out, you have to list inside of the export default, inside of the script, the components that you want to use.

Then from there you can call it in the template, and we're going to talk about what things like message means, and we'll get into that quite a bit throughout this course. For right now, just know it's called a prop and it's the way you can pass data directly into components. And we'll talk about that when we discuss data communication, but for right now, just know we're bringing in, we're importing a component and then that is getting rendered onto the screen.

And we can test this out, if I delete the hello world call, hit save and then come back, you can see all of that content has gone.

We're not getting an error, all that's happening is we're no longer importing that. If I reverse it, hit save, now, all of the data is a back. So if you're coming from another language or framework, say like Ruby on Rails or anything that works with a concept of partials, where you can create these files that have some content or some logic in them, then call them from another file, that's essentially what we're doing with components here.

Hopefully that is starting to make a little bit of sense. But don't worry if that is still hard to understand because we're going to be working with components throughout this entire course, and so hopefully by the end it all really starts to solidify.

So in review, we just covered a number of directories, we covered the assets directory, components and then views. And after this we're going to start moving into some of the configuration JavaScript files that are needed in order for Vue programs to run.