- [Narrator] All right, so let's take a look at what we got
when we installed with the Vue CLI the default installation.
I'm going to cover almost all of these files
except for the public and SRC folder
which I will do in the next video.
First off is the read me file,
which will have instructions
as to how you need to run this project.
So I can do these with the built in terminal
and visual studio code.
So I'm going to say view and then terminal.
And in here I can run any of these commands.
So you can see that I can run the NPM install.
It's already done that for me
when I issued the terminal commands earlier.
So I don't need to do that one.
But you can run NPM run serve,
so let's try that.
And it should launch a website
that displays the application that we've built.
All right, so it's actually going to give you
a link to opening this app
so you can see that it says option click.
So here you can see what the application
that it's prebuilt for me looks like
it's just a simple single page
with just a bunch of links to different content.
So, let's go back over here,
and I'm going to open up a new terminal
by hitting this plus sign.
Now, this is still connected to my first terminal
in visual studio code.
So it's still going to live reload.
This is called hot reloading for development.
That's what I have run right here.
The other command that you can run is NPM run build.
This is going to create the files
that people would actually use
if they were looking at this app on the web.
It's going to build another folder called DIST.
You can see it right here.
And this actually has the code
that people would see if they went to the website.
If you were uploading this into a server yourself,
this is also the folder that you would upload.
Now you can also run an NPM run lint
and it will use your linter to check your code.
Let's go ahead and hide our terminals.
For right now, we'll go through all these files
looking at the package.jason file next.
Now this is what the node package manager
uses to organize the project.
You can see that the name
and version of our application are there.
And also that there is a section for our scripts.
When you run these scripts,
what you're actually running is in this section.
So you're using something called the Vue CLI service,
more than in a minute to run the different commands
like build, serve and lint.
Now there's two sections that follow,
one of them is dependencies,
and the other one is dev dependencies.
Dependencies are plugged into a modules
that are required to run the project.
Whereas dev dependencies are only needed
during development like what we're doing right now
while we're running the automation for this page.
Now the rest of these files are configuration files.
This one helps you configure ES lint,
if you want it to customize how it's working,
to check your documents.
And the next one called browser list
helps you tell the application,
which browsers you want to support.
This means that you want to support
at least the last two versions
of all browsers that are not dead
and have greater than 1% usage on the website.
You can modify these
if you want to try to support some older browsers
it'll do its best to humor you.
Okay, next up would be the package.jason file.
Now this is related to our dependencies
and our dev dependencies.
And that's because every dependency
that you're using in your package.jason file,
needs to download other sub dependencies.
So this is telling you what versions
of each one of those sub dependencies you're using.
So the much longer list,
you can see that it's actually humongous.
'Cause it has every module that you installed
and every sub dependency for that module.
This thing is 12,000 lines long.
So, not something you check,
but this is actually useful
for things like git hub
to check that you're using secure versions
of some of these packages.
Next up is one of those files
that got placed in our main folder
to help you configure babel,
and it's already all set up for you.
So the babels, the thing that allows you to use modules
and also it helps you sort of manage
how that code is converted
whenever you want to support all the browsers.
So, here you can see that all we're doing is setting up
a preset for the Vue CLI.
And here's again where you would go in
and reconfigure what babel is doing.
So when we talked about the package.jason
and the lock.jason file,
we said that there is a lot of modules
that get installed by our application.
All those modules go into a special folder
called node modules which you can see right here.
And there is all the modules that got installed.
Remember, it's not just the ones that we installed,
it's also the ones that we installed needed.
So, it tends to be really huge
that's why that lock.jason file
was like 18,000 lines long or so.
But interestingly in here
you should be able to find at the very top,
'cause it starts with an add sign,
the location of our view files.
So if you remember, let me open up the package.jason
and show you that most of the things that we're loading
are in this @vue folder, including the Vue CLI service
that you remember were using
to run these different commands.
So, if we open up this node modules
and then take a look at the view folder,
you'll see that we can find the CLI service right here.
So this is actually the module that we're running.
And here you can also see where other modules
that you're not using
like the router or the view X modules are also located.
You really don't do very much with the node modules folder.
And if you noticed it's great out,
so it's a little bit grayer
as well as the distribution folder.
And that is because of a file called the git ignore file,
which is right here.
The job of this file is to tell
git not to send things to git hub,
and that's because imagine if every project in the world
had a node modules folder
with like 18,000 different dependencies,
if we had to upload these files into our projects
they would be a lot bigger,
and you can easily recreate the node modules folder
by using the NPM install command.
Notice that the distribution folder is also here.
So, your distribution doesn't get sent
to git hub by the fault,
because it's something that's easily recreatable
by issuing a command.
And that's all the main files.
There's a couple more,
we'll cover them in the next video
because they determine how Vue JS
is actually loading up our page and application.