- [Instructor] Before we get going,
let's take a look at what we get when we install projects
with the Vue CLI.
Now, if you're familiar with Vue.js projects
you may want to skip this part
but I really like to talk about how things are laid out
so that we're on the same page about our project.
Now, when you begin a Vue.js project,
the first thing you want to do
is run the development server.
So, I'm going to open up my terminal
and I'll do the npm run serve command.
I've got the README file open so you can see
that there's an npm run serve command
and then you can also run an npm run build
and it's going to build the project and minify
or make all the files smaller for production.
And let's go ahead and run that.
We've got a browser open right here.
So, whenever this is done right here
then we can open up that address on our browser.
So, it'll be localhost 8080.
And you should begin each chapter with this already done.
So, beginning the npn run serve command.
So, I'm going to close up my terminal
and here's the application that we get
when we install Vue.js.
It has two pages,
this page right here which is the home page
and then this other about page which is very simple.
And that's because we've added routing
or we specified that we wanted routing with our project.
So, let's go through how all this happens.
In a default Vue.js installation you're going to get
two main folders that you're going to work with,
the public folder which is for files,
so that you want everybody on the web to have access to.
So, this has our favicon which is the icon
that you sometimes see at the top of web pages.
And then we also have an index.html.
It's exactly what you think it is.
It's just a regular HTML where all of our application
is going to be sitting.
So, if our the application was part of a bigger project
we could add additional things in here.
Now, one thing that you'll notice
about this particular index that HTML page
is that it doesn't have any script tags
or any link tags to CSS.
And that's because if you Vue.js uses Webpack
to manage the files.
Webpack is a module bundler and what it does
is take care of building your project
from your different JavaScript files
and putting them together into a complete application.
It's going to automatically insert the HTML and CSS in here.
Now, if you needed to you could add
your own HTML or CSS here.
Say, if your project was part of a bigger site.
You could put any of that in here
but normally we don't touch this file.
And then the folder that you'll be spending
most of the time with is this source folder.
This has a number of sub-folders
and the one that we are most interested in
and this is the file that Vue.js will load at the beginning
is this main.js file.
Now, before I open that, I want to show you that
the most important thing about this HTML
is that our application is going to live right here.
It's going to have an ID of app
and you'll see that in this main.js file
we're going to target that element with an ID of app
and then mount the application in there.
Now, we're mounting a component called app.
You can see that it's being loaded in this line right here.
So, what goes in our application
comes from this App.vue file.
Now, this page is also where you will insert things
that you want your entire application to know about.
So, we have added the view library
which is the main library that you need for everything,
the app because that has the main page or the main component
and then also the router.
Because we're using routing on this project,
we need to load the router and make it available
to all of our different components and sub-components.
Then we set up a object here where we pass along the router
and then set up the main application.
So, the other things that you would put in here
is again, anything that you want the entire page to know
and we'll be doing a little bit of that later.
So, let's move on to the next file that main.js calls
which is this App.vue file.
And you can see that Vue.js components
generally have three parts to them,
a template and sometimes a script section
as well as a style section.
You can see two of those right here.
So, sometimes you'll see just the template
and sometimes you'll see a script in there additionally.
So, in our template you can see that
there is a little bit of HTML
and this sets up our main application with a navigation bar
which is this thing at the top here
that has two different links.
This looks pretty much like HTML
except for these two tags that you're not familiar with
called router link.
That is how we link to other pages.
So, it's similar to like an anchor tag in HTML
but they are managed by the router
and so this is what you would use instead of an anchor tag
to link to other pages.
Now, those pages are actually loaded
right in this sub component called router view.
So, the actual page underneath this navigation,
when we click on home and about is actually being loaded
into this router view.
Now, notice that there is no script tags in here
that's because we've already loaded the router
into our main.js file.
So, that makes it convenient because then
you don't have to reload that component
if you want to do something in here.
All right, so in App.vue we have two different routes,
the about route and the home route.
Now, those are being managed by another JavaScript file
that we loaded into main.js.
You can see it right here, it's called router.js.
And here again we're importing the library
and we're importing the router cause we're going to need that
and then we're importing one of our pages.
We're importing our home page.
Now, that's the first page that loads
and it looks like this.
We're not loading the about page
and you can see that under views
we have both of those pages.
We're actually loading the about page somewhere else
which I'll show you in a minute.
So, here we're setting up the router
and then we're creating an object and this object
is what defines your different quote on quote,
"pages" or routes.
In a single page application like the one we're building
there aren't any actual pages.
There's just different routes.
And you can see that when we click on the about
quote on quote "page",
what we're actually doing is modifying the URL over here
so that it has a different sort of slash
right after this pound sign right here.
So, what the router is doing is using the HTML hash tags
to send us to a different looking page
depending on what happens after that hash tag.
Now, you may not see this hash tag
if you have set up your application differently.
Remember when we did the installation
I mentioned that one of the options was
to show or hide this hash tag
depending on whether or not your server
was set up properly for it.
And I said that we're not going to do that
cause I can't assume that you've set up the server
in a specific way
but this is why we have this hash tag here.
And when we go to the home page it just uses a slash
instead of this slash about.
And we've set that up here in this configuration object.
We have two routes and a route normally gets a path
which is what you type in after that hash tag
then it also gets a name
so that we know what to call it later on
and then we also specify what component we want to use.
Here at the top we're specifying
that we want this home component.
It's coming from the Vues right here,
this home.vue will be what gets loaded, right.
And then down here we're specifying that we want
another path call about
and about is going to use a component
that is actually dynamically generated.
So, this is fancy routing.
You don't really need to worry about it.
We are going to be using this notation
for the most part in this course
but one interesting thing is that a component
can be a named component or it can just be a method
or a function that does something.
In this case, it's doing some fancy stuff with Webpack
to generate different pieces or chunks
of the compressed JavaScript that it's going to generate.
So, don't worry about it.
It's not really that important.
They were just feeling fancy when they generated this.
All right, so finally let's go into the Home.vue file.
You can see that here we have a again a template
and a script.
We don't have a CSS part in here
and this just has a div with a class of home here,
an image that we're getting from the assets folder.
And then just to again get fancy again
we are using a sub component
and this component is called hello world.
This is what components look like.
They look like HTML tags.
They can pass along information down to the sub component
and it has a script where I imported this sub component.
So, if you look at components, there's hello world.
So, Vue.js is really just showing you
a interesting structure for a sample application.
We're going to modify this quite a bit.
So, don't worry if it doesn't all make
a lot of sense quite yet.
A couple of other things that you should know
in the App.vue component.
Notice that we are using a style section.
This style will be applied to this component
and the interesting thing here is that
we're actually using SCSS which is Sass instead of CSS
inside this component.
So, this is going to give us the ability to use variables
and other things and you'll see that I'm going to be
using the Sass version of Bootstrap
and this is going to be relevant then.
But other than that the home and the view components
are pretty simple.
And we'll go into building our own components.
Look about it's just really a template,
it's not even a style sheet or a script.
And then the home component
calls the hello world sub component
and this is actually what has most of the page
that you see here,
it really is just a bunch of divs.
And you can see that since we passed along
the hello world message,
that message is being displayed
by this interpolation right here.
Everything else is pretty much just regular HTML
with a bunch of links
and there's some other fancy stuff here.
I wouldn't pay much attention to this.
We're going to build our own
but it's always good to understand the structure of things
and how they work.
So, we'll be taking care of customizing this
in the next video.