- [Instructor] In a real project,
you wouldn't just use what the CLI installs,
but add your own modules.
So let's take a look at how that works.
Now we're going to add a few modules in.
They're going to be pretty similar to what we used in CodePen.
So for example, we're going to add Bootstrap
but through a module, so you can get that at this URL.
In addition, we will add the Font Awesome library
which you can find right here,
and also the Vue Font Awesome library
that you can find right here.
Now Vue Font Awesome is a version of Font Awesome
that you can use as modules.
So this is also going to teach you
how to work with different modules
that have been built for Vue.js
that you can import and use in your own projects.
Now finally, optionally,
you can also install animate.css.
I don't think that we're going to be using it
but I'll show you how to get it,
and also where it would go
if you wanted to use that library in your applications.
To do that, we're going to need to issue a bunch of NPMI
or NPM install commands, and they're quite long.
So I've got them all right here on this line.
Remember that to get to these slides,
you can go to the URL at the beginning of this video
and then hit the arrows to get to wherever you want.
Let's go ahead to our Visual Studio Code project.
And what we're going to want to do is use the Terminal.
We can use the one that comes with Visual Studio Code.
So I'll go to the Terminal menu and select New Terminal.
Let's clear that out.
And I'm going to paste everything that I copied
from that slide.
And then I'm going to hit return.
This is going to take a while
and install all those modules into your project.
Once that's done, let's go ahead and clear this out again.
And I'm going to run the npm run serve command.
That's going to start our project
and open it up in a new window.
Right, so I'm going to Option + Click
to open this up in a browser.
So this is what the application looks like
now that we've installed the router.
And the main thing is
that we have these two different pages
the Home page and the About page.
And so let's just briefly go over
what has changed about our application
since we installed the router.
Now, if we go to the src folder you'll notice
that our entry point is still this main.js file.
And now we have added this import statement
to import the router.
And in addition to that,
we have added this use statement
to make sure that we're using the router
inside our applications.
So this is how you add some additional modules.
You import them into the main.js file,
that way they're going to be available
to all of your applications.
And then you typically add something
to this createApp command.
If you want to use a router
or if you want to use a module,
you would import them right here.
Sometimes you add additional things in between
and we'll be doing that in the next few videos.
Now I do want to mention
that because I've modified Prettier as well as ESLint,
it's given me some orange lines right here,
and that's because this is JavaScript
and it wants to use single quotes
'cause that's what I specified in Prettier.
So all I need to do is just save this
and you'll notice that those go away,
and now also my double quotes
have been switched to single quotes.
So that's going to happen
whenever we touch another one of these files.
So let's take a look now at our App.vue file,
that's the other one that is slightly different.
Now in here you're going to notice
that we have a new navigation
which you took a look at a minute ago.
Here's the navigation that's on top
and you've got these two pages.
So this navigation allows you to go to either the Home page
and also the About page.
Now, normally in HTML you would do that
by creating an anchor tag,
but with the router you have to use the router-link.
It's pretty much the same thing.
And also the to right here replaces an href command
that you would use when you're using an a or an anchor tag.
Now, the other thing that is new right here
is this router-view.
And this is essentially
where all of your content is going to go.
So when you go to a new page, say the Home page,
the router-view is going to load the different pages
into essentially everything that happens here.
So the navigation is going to be at the top of every page.
And then this router view is either going to show
the Home page or the About page,
depending on which one you click.
Notice that there's also a folder here called router.
And this is where we define how the router works.
It has an import statement that imports the Vue router
and then it has an import the Home page from Home.
So it's got a couple of tricks up its sleeve.
This is a normal import,
how you would normally import a module
into another component.
And then we have this section called routes.
So here is how we define how you go to different pages.
And then this export statement just set things up
so that when you use this router in our main.js file,
it loads up all the configuration.
And this is actually what creates
all of the statements, the router,
and also sets up how everything works.
Let's go ahead and save this so we get rid of
those little orange underlines.
So you can see here that under routes
we have a route with a name of Home.
That's the Home page, the path for that is the slash.
So if you notice, when we go to just a regular Home page,
we get this hashtag.
That's because we turned off history mode.
And when we go to About page
we get this about at the end of our URL.
And that's what the two different routes are.
Here's Home, it's a little bit simpler.
And for the About page,
they just threw something a little bit sort of confusing
and also fancy at you,
just to show you that when you're working with routes
you can point to a component,
like this Home component which we had to load,
or you can do something fancy
where the component is actually a function.
And in here you can do more interesting things.
The two links essentially do the same thing.
This is just a fancier way
of doing a separate page.
For the most part, we're going to stick with this
in the rest of this course.
And that's how you set up routing,
which is what's been a little bit different
from what you've seen before.