- [Tutor] The best way to work with Vue components
is by defining them in files with the dot Vue extension
and these are known as single file components.
Here's a component called hello,
defined in its own file as shown in the Vue guide.
Browsers can't natively support such files
so they need to be compiled to JavaScript with a build tool
like Webpack or Vue CLI or command-line interface
which can configure Webpack for us
and make the whole build process a lot simpler.
Vue CLI is a mature system for rapid Vue.js development
and it makes it incredibly fast to scaffold
and configure a project
that can make use of single file components.
From the Vue guide, you'll find links to the Vue CLI docs
in a few different places.
One being the ecosystem menu up here.
If I go down and click on Vue CLI
and then click get started,
I can click installation in the left-hand nav here.
I'm going to be using the NPM package manager provided
by Node.js.
So I'm just going to copy this first command here.
And if you don't have Node.js already installed
on your machine, head over to node.js.org
and download and install the latest LTS
or long-term support version for your platform.
Once that's taken care of, you should be able
to install UCLI on your command line of choice
using the NPM package manager, that's included with Node.
I'm on a Windows machine using vs code.
So, I'm going to open up a terminal with Control + backtick
and then I'm just going to paste that command
that I copied from the Vue CLI docs.
I'm not going to talk about any of the initial output here
because it's likely different on your machine.
But once this is finished installing,
we can tell that we've successfully installed
the correct version if I go back to the Vue CLI docs
and click on GitHub in the upper right.
I can see on the right side
that the latest release is four dot five dot 11.
So again, on the command line
if I do Vue dash dash version,
I should see that same version four dot five dot 11
and I do.
So next we'll go ahead and create a project with Vue create
and the name I'll give it is flashcard dash app.
There's a lot of options here
especially if you look at manually select features,
but for now we'll use the Vue three preview preset.
And then when this is finished scaffolding the project
we're given some helpful instructions
for starting a lightweight development server.
So let's change to that directory.
CD flashcard app and then we'll execute NPM run serve.
And as long as you don't have another web server
or some other process that's using port 8080,
you should see these links.
Also note that if we wanted to deploy this
to a production server,
we would first want to execute NPM run build as it says here,
and that would create a dist directory containing
an optimized version that would work on any web server.
But for now, if we just click on this local host one,
we should see that we're up
and running on the Vue dev server.
So to get a sense of how all
of this works with the local development server,
we can start in our flashcard app directory
with index dot HTML in the public directory.
You see here, the div with ID app, just like we had
in the other version, you won't see any script tags
on this HTML page because the development server
will just automatically inject them
as it says in this comment here.
Obviously that's not going to work
if you plan on deploying this to a server
that's running Nginx or Apache and serve up this HTML file.
So you would want to run that NPM run build command
as was already suggested in the console output.
So to understand the JavaScript, our entry point is going to be
in the source directory, main dot js.
This is similar to the way we mounted our app before
but instead of defining an options object here,
we're importing it from app dot Vue.
So let's go there next.
In the same source directory, app dot Vue
is our first look at a single file component.
So we can call this the root component of our Vue app.
It's sort of like the route Vue instance that we defined
in our options object previously,
only this time, it defines its own template
within these template tags here,
instead of with those messy strings.
And that allows us to take full advantage
of IDE syntax highlighting.
And then we also have an optional style element down here.
Notice it's also importing a child component, hello world,
which it uses in its template up here.
We'll talk a little bit more
about what's going on in this file in the next video,
but for now I want to show you one nice feature
of the development server, which is automatic reloading.
So if I were to line up my IDE and my browser side-by-side
and then just change this message prop here,
instead of welcome to your Vue.js app
I'm going to just say flashcard app.
You can see that the browser refreshes automatically
so I can see the change right away.
This is a really nice way to work
and iterate on your projects.
In the next video, we'll go through the exercise
of creating a simple component
and integrating it into our app.