what is going on when you install things with a terminal.
So let's go over what we got
when we install things with the Vue CLI.
As in the previous video, I have a preview
of the current application running
in a browser here on the right.
And on the left, I've opened up the Vue interface folder
that got created by the Vue CLI into a code editor.
I'm using in a Mac so I know I can use Linux command.
On a PC you may still want to use Git Bash.
I've already run the npm run surf command
and that's why this application
will live reload if I make any changes.
And you can see that a terminal
is down here at the bottom of the screen.
To get that, you just go to the terminal
and select new terminal.
You can also use the command keys.
So I can actually close that once it's running.
And let's go through everything
we got when we install things in this directory.
First off is this read me file.
This has a few different commands that you can run.
We've already seen the npm run serve command.
And you can also run another command called npm run build,
this will build a development version of your application.
It's smaller and optimized for production.
So this would be what you upload to your server.
This is actually going to make another directory in here.
And what's in that directory is what
you would upload to your server.
There's a few other commands that you can run here
and you can run those if you know what you're doing
and you've configured your application.
This all depends on what you've done
when you've used the Vue CLI to install things.
So since this is a typical node package manager project,
we have a package that json file.
This will have a list of all the dependencies
and developer dependencies, as well as some additional
configuration that you can use.
So for example, you can control how the code is written out
so that it's compatible with older browsers
by configuring this browser list parameter right here.
You can control how postcss works.
Postcss allows you to control how your css is written
to be compatible with older browsers.
You can also control things like eslint,
which is a linter that helps you write
your code in a little bit sort
of clearer manner by giving you suggestions.
You configure that in this section.
And you can see that when we run the npm run serve,
or npm run build command, we're actually using
a module called Vue CLI service.
And that happens to be something we load right here.
So these dependencies are essentially the extensions
or the modules that get installed
by the command line interface.
All those go into this node modules folder.
You can see that here is the at view directory,
which is where most of our things
are including this CLI service.
So these commands are all coming in from this folder
and you can take a look at what's in there if you want to.
Now, in addition to node module,
we've got some typically other node files.
So we have this package dash lock dot json file.
This has essentially a list of all of the modules
as well as all their dependencies.
That's why when you open this node module
you can see that there's a lot more other files
that aren't listed here.
So we also have a babel dot config dot js.
Babel is what controls how you're JavaScript is written.
Again, so that it is compatible perhaps
with older versions of browsers
and you can configure some of this here.
We also have a gitignor file.
Gitignore just allows you to control
which sort of folders are tracked by git.
Notice that the dist folder which is the folder
that gets created when you run an npm run build command
is called and this tells git not to upload this folder
to GitHub or wherever you're managing your code.
In addition to that, we have a couple of other folders,
the public as well as the src folder.
The public folder is where you put anything
that you want to be accessible on the web
after this application is processed.
So if you want to you can include images in here.
And we have this thing called a favicon,
this little V right now,
which you can see usually at the top of your browsers,
right over here.
And we also have the index dot html file.
You'll notice that there is an assets folder here,
this is where we have our logo.
This is sort of where you would put things
that you want your Vue application
to know about and control.
And then all the stuff in this source folder
will get processed and placed somewhere.
So that either the live reload server that is running
will display it or when you run the npm build command
so that that folder that gets created
with all of the output files has everything they need.
But you put things, graphics that you want Vue js
to do something with in the source folder,
everything else goes in the public folder.
So in addition to the assets folder,
you have a components folder
and then you have a couple of files here.
So first we'll take a look at the main dot js file.
This is the first file that gets loaded by Vue Js.
So what you can see here is that
we're loading out the Vue library
as well as a component here.
And this component is this other file.
So this is the main component, the master component,
root component, whatever you want to call it.
And then we are asking Vue to render everything into
an element with an ID of app.
If you remember that is in this index dot html,
that's this div right here.
And then, since we're calling this sub component
call app dot vue, everything else
is happening in this component here.
So this is our master component
and this is actually pretty simple.
And it sort of shows you how Vue js files work.
You create three different sections,
a template section, a script section and a style section.
This one's sort of optional.
You don't have to use a style section.
And in the template section, you put in your html.
There has to be a master containing div,
so there's only one div here,
you can't add another div right now.
And inside that, you can put in any html.
Here we're loading up an image, this V right here.
And then we're loading up another component,
this is a child component of the app component
or also called a sub component.
And we're passing along this thing called a message,
so some sort of message that says,
welcome to your Vue Js app.
You can actually see that right here.
So nothing else is actually in this piece of code.
Everything else is in this hello world sub component.
So to load that, we're going to do in the script section.
We're going to input that sub component here.
And then in here we're going to do some set up
and we'll talk about all of this later and how it works
but essentially we're identifying
the name of this main component.
We're also calling it app here.
And this app refers to the ID right here,
not to the one that we saw earlier
in the index dot html.
And then we're just saying that we're loading a component
into this main component called hello world.
We've imported it here.
And we are calling it right here.
And that's all that that says.
So there's not a lot going on in this page.
We do have some styles and this is essentially just styles
that apply to your entire application,
you can put that here.
Remember that you can also load some things
into the index dot html file if you want to.
But it's sort of nice to have everything that's required
for a component within the component itself.
Also this will prevent styles that appear here
only apply to the component that you're in,
not to other parent components.
So that's sort of cool and unique about this framework.
So finally, let's take a look at the components folder
and take a look at the other component we're loading here,
this hello world.
Here finally you can see the rest of all this code,
all these links right here.
Pretty simple html.
The only interesting thing that is happening here
is that we are using template interpolation
to load up that message,
this welcome to your Vue js app here.
And everything else is just html.
There is a script here and we're identifying
this sub component as having a name of hello world,
it has props.
Again, we'll go into all of this later
and then we have this thing
where we define what the styles look like.
And we'll talk about all this later.
So this is everything we got when we installed things
with the CLI, I always like to go over what things mean
so that we're all comfortable with where
things are in our projects.