- [Instructor] Let's take a look at how the project
actually built itself from the files that we have available.
As I mentioned before, most of the things
that you'll need to worry about are in this source folder.
But in the public folder we do have that index.html file,
and the most important thing you need to know
is that the application is all going to be loaded
in this div that has the id of app.
Also, that in the source folder, you have this main.js file,
and this is actually looking for that element
with an id of app and mounting the application
right here in this command.
You're almost never going to need to modify
this main.js file, it's sort of like a loader
that's going to bring in all of the components
that you need.
But in here you'll notice that we do have
an import statement, and this right here is importing
the entire library.
Whenever you see an import command with just a name,
it means that it's importing something
from the node modules folder.
And whenever you see a command like this,
it's importing something from a relative file.
So this is looking for something called App
that is in the same folder as this file,
and this happens to be called App.vue.
If you look at this file, you'll notice that it has
a single export statement and that is identifying
this application as something with the name of app.
So, let's go back into this main.js file.
There is some configuration being done here,
so you can modify some of the things
and configure vue.js slightly differently
by adding some commands here.
And you'll almost never mess with that.
And notice that we do have something called
a render command.
And this is just rendering the application
and that's in that App.vue file.
And it's, again, mounting it into our element
with the id of App.
So, let's take a look at that App.vue file.
Here you'll notice that the application
is being split into three separate parts.
One part will be the template,
and this is the same thing as when you create a component
and you give that component a template attribute.
Notice that there is a container div right here,
and remember that when you create templates
and subcomponents, and really, any html,
everything has to be in a single div.
You can't have something like this
and put in a separate div with some other content,
it's not going to work.
So a single container and then in here all we have
is this logo that you see right here.
And this is referencing something in the assets folder.
Assets folder happens to be right here.
And then there's a file called logo.png.
And in addition to that,
this is referencing something called HelloWorld.
So this is a subcomponent and it's passing along a prop
with some text right here.
And, in addition to that, this file has a script section.
The script section is where we would put, obviously,
the JavaScript, so this will be the equivalent of a script
tag in a regular index that html file.
When we were working with CodePen,
this is essentially what would be in your script tag
within CodePen.
This is importing this HelloWorld component
from another file that happens to be
in the components folder and it's called HelloWorld.vue.
So, if we look at the components subfolder,
there is your other subcomponent.
And then this is using the export command
to export this component with the name of app.
And it's also notifying Vue.js that this is using
a component called HelloWorld.
This is that component that we have right here.
There's another section called style.
This is where you would put any styles
that you want to apply to this specific component.
So, this is pretty cool.
It's actually creating some style that will be relevant
to this application.
We're setting up some basic fonts here.
And this is equivalent in CodePen
to what's in the style tab.
So that's pretty cool.
Let's take a look at HelloWorld.vue, because this component,
all it's doing is essentially loading up the logo
with something called HelloWorld
that happens to be right here.
And, again, we're going to see the same structure,
we have a template section, as well as a script section,
and a style section.
Now this one has this thing called scope.
Now this is interesting because this means
that this CSS is going to apply to this component only.
Whereas in the App.vue file,
this CSS will apply to all subcomponents.
This particular CSS is going to limit the styles
to only this component.
So we don't have to use any prefixes in here.
Notice that we're saying things like,
we want to modify all the h3's,
that means that all the h3's in this component only.
If you had another component, and it was also using h3's,
you know, headline level three tags,
those would be scoped to only that component.
So this is cool because it makes writing your CSS
a lot simpler.
You don't have to write a lot of prefixes,
you just put in the scoped attribute here and style,
and then you just specify individual things
like list items, unordered lists, and things like that.
So that's pretty cool.
All right, let's take a look at the script, pretty simple.
It's going to export with the name of HelloWorld,
which I was referencing in the parent component.
Right here is where I import this,
and then we essentially have a list of props
that we're passing to this component.
The message is something that we were passing
from this App.vue.
If you remember right here when we called this HelloWorld,
we're sending along a prop and we're listing that
just like as we did when we were just using a script tag,
and that happens right here.
And then the template is a pretty straightforward template.
It receives that prop called msg right here,
and then it just has some regular html
that has some links that are useful to Vue.js project.
So if you've been following along with everything
we've been doing with the regular script tag,
this should be pretty easy to work out and understand.
And it's the way that our basic project
is already setup for us.