- [Instructor] So great.
Now that we have all of our routes set up correctly,
we can actually start implementing each of the pages
that we just created.
So the first step in doing this,
since we haven't created our back end yet,
is going to to be to get our hands on
some fake data that we can use for development purposes.
It'll really help us build our app if we have
some fake data on our front end,
since that means we won't have to worry about things
like making network requests or anything yet.
So there are three main things we're going to do here.
The first is that we're going to copy over
the product photos from the exercise files,
then we're going to copy over some fake JSON data.
And finally, we're going to copy some styling
into each of our components
so that our app will look good
without too much effort on your part.
So let's start off by copying over the images
that I've provided for you in the exercise files,
just open that up.
And what we're going to to do is copy all
of those files over to our view projects assets folder,
the way that you might want to do this,
if you're using VS code on a Mac
is simply by right clicking on the assets folder,
clicking on reveal in Finder,
and then simply taking these
and copying them
and pasting them inside the assets folder.
Okay, so now that we've done that,
let's close these windows,
the next thing that we're going to do
is we're going to copy over the fake data.js file
from inside the Exercise Files folder
into our view projects source folder.
Okay, so I'm going to do that over in another window here.
And then paste it inside source.
Okay.
And if we open up this fake data file
and take a look at what's inside of it,
basically, there are two things inside of here
that we'll be using in our application
while we're developing it.
The first is an array containing the data
for all the available products on our site.
Currently, there were only 12,
just for development purposes.
And we're going to to use this data
to build out both our products and product detail pages.
And the second point of interest here
is this cart items array,
which is basically just an array containing references
to the products and the products array.
And this is going to represent the items
that a user currently has in their cart.
We'll use this to build out the cart page when we get to it.
So we've got the photos and the fake data copied and pasted
into our project,
the last thing we have to do is copy and paste the styles
that each of our components will need.
Now, assuming you don't want to sit down
and type out all the styles here,
I certainly am not going to do that,
what you can do is copy and paste the styling
from the end folder of this video.
And you can find those styles inside each
of the respective page components.
So what we're going to do here,
and I'm going to be copying this from another window,
is we're just going to open up our three pages here.
And from the end state folder here,
I'm going to copy the contents of the style tag.
So here we have the CartPage.vue styles,
which I'm going to paste right over top
of the existing ones.
Okay, so now we have those, then we're going to do
the product detail page.
And I'm going to paste those over top of the existing styles
in the product detail page.
And then we're going to do the products page.
Which again, I'm just going to paste
over the existing files.
Okay, so those are the specific scoped styles for each
of our page components.
So last styling that we're going to want to copy and paste
into our application is going to be the App.vue styles.
Now I've designed these files to sort of apply
to all of the components in our application.
So you'll see what that looks like in just a second.
Basically, you can copy those as well from the end state
of the exercise files for this video.
And we're going to paste those over top
of the existing styles.
And you're going to notice per my comment here
that we are not using scoped here
because we specifically want these styles
to apply throughout our application.
So that's kind of how we do that there.
Alright, and that should be it for styling.
So let's move on to actually implementing
each of these components.