- [Instructor] In a real project you'd probably want
to install your own modules.
So I'm going to show you how to install things
that match some of what we have been doing in CodePen.
So I'll show you how to install Animate.css
as well as Bootstrap, Font Awesome.
And although I'm not going to use it right away
I'll show you how to install the Vue Router
which can show you can install things
that would normally be done
with the default tools a little bit afterwards.
So we've installed everything with the Vue CLI.
Vue Router is something that you can install at that point,
but I'm going to show you how to do it after the fact.
Right so let's go to our project
and right now it looks just like the default.
You may already have the terminal running
with the project, and the preview showing.
If you do I'm going to go ahead and cancel that,
hitting Control + C and clear this out.
In Visual Studio Code the terminal is right here,
or you can use the Command key which I'm using right now.
If you're using a separate terminal,
make sure you open that and cancel the current project.
You can still use Control + C.
Alright so let's go ahead
and do some additional installations
and that I'm going to do with the npm i command
and the --save option.
So all that stuff is going to place
some files here under dependencies,
and we're going to install animate.css as well as bootstrap.
And I can do 'em all at once which is cool, jquery.
jquery is just a bootstrap dependency
so bootstrap needs it to run.
Also it needs popper.js
and I'll go ahead
and install the vue-router.
Alright let's go ahead and install some more things.
So I want to install a font library called Font Awesome.
So I'm going to issue an npm i, --save,
and these are a little bit long,
but they are related so I'm going to do 'em all at once.
So I'll do
@fortawesome/fontawesome-free.
So that's the free version
and I'm going to copy most of this,
'cause the other ones are going to have pretty similar names.
So @fortawesome/
fontawesome-svg-core.
Then paste that thing again and then we will use
free-solid-svg-icons.
And then I'm going to show you
how to install a componitized version of Font Awesome.
So normally Font Awesome is just sort of a script tag
that you add into your projects.
But we're going to use a version
that is going to work really well with vue.js.
There are versions of things like Bootstrap
and other libraries that are essentially components
that you use and you'll load into your projects.
Just like the work we've done with components.
It's a little bit more useful.
You'll see that it works pretty well.
So I'll show you how to do that,
vue-fontawesome is what I'm looking for here.
So that's the vue version of Font Awesome.
Let's go ahead and install that.
Alright so if everything worked I'm going to clear this up
and close this out and you'll see that all
of the dependencies are now showing up right here.
Which means that our project is loading up all these things.
We can close out the package.json file.
And let's go ahead and clean up our folder.
I'm not really going to use this HelloWorld.vue.
So I'm going to delete that.
And I'm going to get rid of the assets folder.
I don't really have any assets
that are going to need to be placed
in here so I'll et rid of that.
And so I have this app.vue file which is fine.
I'll leave the components folder there.
And I do want to say one more thing though
in this index.html file it's perfectly fine
if you just want to add say bootstrap by putting
the script tags here, because you remember
this is essentially the html document for your project.
So if you're already using script tags
then maybe this is going to be part of a bigger layout
that you're doing here.
It's okay, it's going to use the the cd ends.
So it might be a little bit faster.
But I'm just showing you how to do things
with a node module projects.
It has a few advantages.
Like, for example, you're going to be able to work offline
where if you use script tags,
you have to be online with a web connection.
Other than that,
let's go into
the actual app file
and take a look at what we need to do to modify.
So actually, we're going to go into main.jx
and we're going to need to import things in here as well.
So we will say import
and just will say bootstrap,
and that's going to import bootstrap
and then we're going to import
library
from and this is going to import the icons
so we'll say
fortawesome,
and actually,
this particular editor gives you a really nice
sort of shortcut here.
So I'm going to import library from my svg icons.
And then I'm going to import
bootstrap the css now.
So this bootstrap import, it's usually JavaScript.
And it's also going to import all the dependencies.
So you don't have to worry about importing like jQuery,
and popper
this is going to do everything.
But we need to import the css manually.
So this is also important css
So we'll say bootstrap.
And then we need to look into distribution folder
bootstrap.css
So essentially, this is looking for
in the node modules.
It's going to look for the bootstrap folder in here.
And sometimes when you install
you have to hit this like reload button here,
but it's in here somewhere.
Let's find it.
There it is bootstrap and in the distribution folder,
there's a bootstrap,
next to it I think I need to put in here a css.
So css bootstrap that css.
So it's going to load one of these files here.
So this bootstrap that css file,
I don't need to worry about minimizing or anything
because my build process automatically
takes care of all that.
So let's keep on installing stuff.
(keyboard clicks)
And we'll need to import in the same way
the animate library
so that ones under animate that css slash
and just really animate that css.
Right so if you want to you can also
actually import the icon,
so one of the reasons this is great out
is because we're importing a library
but we're never using it
so you do here is you say import
and then you import it the icons that you want to use
in your project.
So I'm going to use faShoppingCart
as well as faDollarSign.
And then I'll say from
and then the library that I want to use.
So this will be fortawesome and solid-svg-icons.
And then I need to go ahead
and add those to the library.
So the library is what we are actually importing
for the svg-core.
And we're manually pushing
these icons that we want to use into that library.
So we'll see a library add and then the two icons
that we want,the faShoppingCart
and faDollarSign.
So in addition to that,
we need to go ahead and actually use them in our components.
But let's go ahead and do that in the next video.