2.1 Project Structure

The next thing we wanna do is take an overall look at the basic layout of our application because we're gonna be duplicating, a lot of these concepts throughout the process of our development cycle. So it's gonna pay to get a little bit of a precursor into what it is exactly we're going to do, and what the building blocks are of Vue.js. So as I mentioned before, the kind of entry point into everything, is gonna be your index.html file that you see right here. Now I did add in some extra stuff here to show you that semantic works, and it does, so let's just go ahead and delete that for now. And you'll see over here that we're back to our normal page that we had. Okay, so let's see what this page actually looks like, so we've got our head nothing in here looks all that crazy, we have our body. We have this div with an id of app, which we'll come back to and then we have our script tag, so really there's not a lot going on here. So where the heck does all of this extra stuff come from? We have an image, we have text, we have links, we have all sorts of stuff going on in here, but this index.html html file is rather thin. Well the most important part is this div with an id of ap, but what's the big deal about that? Well, the big deal about that comes when you start to take a look at our main.js file. Now, our main.js file here is kind of the glue that starts to bind a standard HTML page with Vue.js so we can start to use Vue.js all throughout our applications, so let's take a look at this. Well we've got a couple import statements, we're importing vue that makes sense, cuz we need to use Vue. We're importing this thing app which is actually a reference to the app.vue, which we'll look at in just a second. And then another configuration setting here, setting production tips = false. Okay, so then the last thing on this main.js is creating a new instance of Vue, now this is where the magic begins to happen. So what's gonna happen is once this file executes, it's gonna create a new instance of Vue and we're gonna set up things just a little bit. We are going to define an element in el an element that we're going to bind to within our application within our index.html file. We're gonna define a template here and that's not as important for this type of an application. But you'll see other ways of defining templates within Vues in an upcoming lesson. And then we're defining the components that we're going to include in this instance Vue. Now, components are very important and we're gonna be creating several of them throughout the duration of this course. But you can think of a component as basically a collection of things that can be reusable, throughout your application that will include HTML templates, that will include scripting. That you can apply some sort of dynamic access and dynamic changes to that HTML. As well as styling and all of those things can be bundled up together in a component that you can reuse by a specific name, by a specific template throughout your application. And once again, you'll see that in an upcoming lesson. So what exactly are we binding to? Well, we're binding this app id, which we saw over in our index, so we have our ID of app, and what are we binding to that? Well we're binding a component known as app, well that's coming from our app.view file. Now there's a number of different ways to create components within Vue, but we're going to be sticking with the single file component structure. And the single file component structure is what's started for you, within this particular Web pack template when it comes to Vue. Where you'll see a file with an extension on the end of it, .vue, and it's gonna contain a template, an HTML template, it's gonna create and contain a script section. Where we can do a number of different things, and we'll talk a lot about that in an up coming lessons, as well as some styling. So I have a basic template here of HTML that is going to replace what we find in this div right here. So if I were to take a look at this, we see that we have an img src we're adding in an image inside of a div id = app. And then we have this kinda hello element here, and we'll talk about that in a little bit as well. But that's actually gonna come from another component that we'll take a look at in a second. So if I were to come back and take a look at the source code, well, sure enough in here, we have an image that has a source of this big long thing here. But ultimately what that's pointing to is this image right here, which is defined in our assets logo.png, which you'll see right here. So, really what we're doing here, when we're starting up our application is, we're binding to that initial div within our index.html file, and we're saying we want to load a component, with the name of app, into that, as an app template. And then, within here, it simply takes this template and it replaces what it's bound to in that index.html file with this template. And then all of these scripts and all of this styling, is applied to that, it all kind of comes together in one big bundle, so that's pretty cool. So now, we also see this custom element in here, well how the heck do we do that? Well, this custom element here is hello, and that's actually coming from this script section where we're defining it. We're saying we're going to import, hello which is another component from the components folder hello. So let's go ahead and take a look at that, so in here you're gonna see basically everything else that you see within that index.html page when we're viewing it, we see some sort of messeging. We see Essential Links, we see Ecosystems, we see all those types of things on our page, Essential Links and Ecosystem. So basically what we're able to do, is we're able to componentize the different sections of our application, whether it be multiple components on a single page, or one big component on an individual page. Were able to take those pieces apart, tease those individual pieces apart, and give them their own reusable functionality, so we can stick them on any page that we want and they all kind of come together. So I can take this hello view, and I can stick it anywhere in my application. And as long as I import everything correctly, everything is going to look exactly the way that it does on this page right here. So what we're gonna spend the remainder of this course doing, is defining an application, creating basic components, and being able to put them together in different places in different orders. In order to be able to come up with a final product that were ultimately happy with to be able to create flashcards, group them together. And ultimately kind of quiz ourselves or provide a mechanism for us to study for maybe some sort of upcoming quiz or test for vocabulary. Or really anything that you want to be able to put on a set of flashcards.