- Read Tutorial
- Watch Guide Video
So, right here I have the final version of the design that the designer put together for us.
As you can see, we have two main pages. We have the homepage that has the login and the registration elements and then if I navigate throughout the entire set of designs, you can see we also have the project dashboard.
So, this is going to show all of the various projects that we have along with each one of the data points that they're going to include. So, the way that we're going to build this out is we're going to start building the pages that we need and then we'll start implementing the components, placing those inside of it and building the functionality that way.
So, in this guide what I want to do is go to our application and make sure that you have your server running, and we're going to get rid of all of this sample data that the Vue CLI generator built for us. So, this is going to be a relatively short episode as we get started.
So, I'm going to open up the project and I'm going to go to the SRC directory and let's just start getting rid of the things we don't need. So, we do not need the logo that they provide us with here, so, you can right click here and click, "delete" that's going to remove it. We also don't need this "Hello World" component at all, so we can right click on that, delete that as well, and then, if you go into "Views," we don't need the "About" page, delete that one.
Now, let's open up the home page and let's now just clean it out. I'm going to get rid of the image call and the call to Hello World and here we'll just say, "Homepage." We'll get rid of this in a little bit as well, but for right now I just want to have some kind of text because if you don't have any text right there then it's going to be hard to see if we have anything, and this way we can make sure no bugs happened or anything like that.
Now come and we're going to remove the import statement and also everything here where we're saying, "components." So, this is going to be a very plain wrapper component, we'll add more to it after this. Then if you click on "App," it doesn't appear like we have any calls, oh never mind, we have this "About" call, we're going to get rid of that.
Then I also want to get rid of all of this sample styling, we're going to create out own styles for this application. So, do that, hit "save", and then the last element is here in the router. We do not need to call this "About Route" anymore, so I'm just going to get rid of this, hit "save" and let's see if that is all we need.
So, if you come back into Google Chrome, it looks like everything here is working, we don't have any errors. If you open up the JavaScript console, and there's a couple ways of doing that. You can hit right click on the browser and click "inspect", or you also could just hit command+option+j and if you click on "console" you can see we don't have any errors here.
That is one of the very first things that I check for. So, if we don't have any errors, that means that we've cleaned out all of the demo code that was provided through the Vue CLI generator. It's good that it gave us that, it provided us kind of a framework for what we wanted to do, but now that we are ready to build our application, we don't need that anymore.
So, in the next few guides, we're going to start building out all of the components that we're going to use throughout this course.