- [Instructor] Let's take a look
at the remainder two folders,
the SRC folder and the public folder.
This is where our application lives.
And we'll start by looking at the public folder.
It has two files, a favicon.ico file.
This is the little icon that shows up here
at the top of this tab.
And it's just a graphic that looks nice.
It doesn't necessarily need to be there,
but it's included.
And then you have the index.html file,
which is the actual page
that is used whenever our application loads.
So this entire page is sitting inside this HTML.
Now you can technically add things here,
like scripts to libraries,
but there are generally better ways
to add those things using Node.js
and the node package manager.
Now this file will be modified,
which is also known as injected
with the actual code of our application.
The most important part of this page
is the div right here with an ID of app.
That's where your Vue application
will be loaded, your whole app lives inside that div,
and you could definitely add things around it,
but this is where all of the application is going to go.
Now, public is also where you can put things
that you want everyone to have access to on the web.
Whereas in the source folder files are normally processed.
Anything that you put in public will be available
at the same URL as your app slash
whatever else you insert here.
So sometimes I put data.JSON files on here,
or my images might go in here.
However, if you want Vue.js,
and the CLI to manage things for you,
then it goes in this source folder.
Now here, you can see that there is an assets folder,
and we have a logo in here.
You can see the logo on our page over here,
so you can insert some images in here.
Again, if you put them in here,
they're going to be managed by the CLI
and the application runner.
And here, the next most important file
is this main.js file.
So this is the first file that is going
to load your application.
And you can see that in here,
we're using JavaScript to just load some parts
of the application.
So here we use createApp and the createApp method,
which we've used before to create an application
from the Vue library.
So it's trying to always import only
whatever pieces of Vue.js it's going to need.
And this is how you do that.
And then we're loading this thing
called App, something called App
from a file called ./App.vue.
ProTech, you don't actually need to use the vue extension.
If you save this, it'll still work just fine.
And let me go ahead and undo that
because we don't really need to do that,
but just remember that you don't need
to put the dot vue in there.
Now, you can also see that the way
that we create an app in this project is
by using the same createApp method,
which we've imported by using this line
and then mounting the app into the item with an ID of app.
Again, that comes from the public folder
at the index.html.
So it's going to put the app right there,
but this main.js file is sort of our original loader
that takes care of things for us.
Now, this is loading something called App
in the same folder, which is this file.
And this is a classic.view file, which has three parts.
First part is a template.
So this is where our HTML would go.
Then there is the script.
This is similar to the scripts
that we've been using so far.
And then we have the addition of this style section.
So here is where you can put any styles
that apply in this case to the entire application.
Any components inside app.vue
would also have access to the style sheets.
Okay, and here we have pretty much normal HTML.
We're importing here, the logo from the assets folder,
and we're also importing another component.
So this is actually using a component that is inserted
into this component.
To use a component,
we'll need to use an import statement.
And so we're importing this Helloworld application
or component from the components folder
and into a file called Helloworld.veu.
Now here, in order to make this
an application we'll need to use export default.
So this is a little bit in a different format
that when you have been using,
but we do an export default here,
and then we give this component a name,
this one's called App, and that's
why main.js called it as the App.
And then we list the components
that we're going to be using in this component.
So here we are going to be importing
the Helloworld component,
and we're sort of registering it right here.
So then if we go to the components folder
and we look at Helloworld.vue,
we'll see that most of our pages there.
However, we can notice that at the very top,
there is an expression with a variable
that we are passing through
to this Helloworld from the App.vue file.
The way we're doing
that is by using a prop.
So here in the Helloworld,
you'll see that we're passing along this variable.
And then in the Helloworld.vue,
we can use it here, but that does mean that in our script,
we have to register it as a prop.
So this is similar to what you used before,
except that here you have the option
of using an object and also checking the type.
We could have still written this
by using the regular array option and then putting
in msg here for the message.
So either one will work.
Now, the only other thing that's interesting
about this page is that this last style section uses
this special scoped attribute.
Now this means that any CSS in this section
will only work with this component.
It wouldn't affect any other sub-components
and that can sometimes be a bit useful.
So hopefully that gives you a good idea
of the differences between the Global API format
and the Application API format.
They're similar, but written slightly differently.
I think that the way that you do components
in applications is a little bit superior
and more fun to work with.