- [Instructor] Let's begin by installing the Vue CLI.
This is a command line tool that will create
all of the necessary files and folders for a Vue project.
And in order to use this, you'll need to have Node.
So make sure you have the latest version installed.
We'll continue by hitting the Get Started button.
Then we'll go to Installation,
and we can see that using "npm"
will install Vue CLI globally.
So I'll just copy that,
and let's go to our Command Prompt window.
since we're installing this globally.
Let's paste that in and hit Enter.
Now that the Vue CLI tool is finished installing,
let's go ahead and go back to the website,
and below Installation, inside Basics,
we'll see Creating a Project.
Here we can copy the command for creating a new project,
go back to our command line and paste that in.
And instead of calling it "hello world",
I'll call it "frontend", and I'll hit Enter.
I'll use the default and hit Enter,
and now the CLI will do it's thing
and install all of the dependencies.
Now let's go jump into that "frontend" folder we created.
And let's give it a quick test,
to see that everything's working.
So we'll use "npm run serve".
And so this will start the server
that's hosting the Demul application.
We can take a look at it by copying this URL
and pasting it in our browser.
And there it is.
Now I'll shut this down with Control + C.
Now let's open this up in Visual Studio Code,
by typing "code".
And of course you'll need to have
Visual Studio Code installed in order to do this,
but you can use any editor of your choice,
and simply follow along with what I type.
Now if that did not open up the project,
let's go ahead and do it manually.
Now that the project has loaded up
inside Visual Studio Code, we can run the same
"npm serve" command, inside the code terminal.
So I'll go over to Terminal, and New Terminal,
and inside here, we can type in "npm run serve".
And let's take a look at one last thing
before we end this video.
If we go over to our source folder,
then to components, inside "Hello World",
I'm going to make a change to show
that it auto-updates inside our browser.
So I'll remove everything between line four and eight.
So I've selected it, then I'll hit Delete,
and type in "Hi", just as a test.
We'll save that,
and now if we look in our browser,
we can see that it says "Hi" instead.
Now if you are using Visual Studio Code,
by default you might not get syntax highlighting,
so you can install an extension,
such as this recommended tool for that purpose.
And now we can see that syntax highlighting is working.
So now we've seen how to create a Vue project
using the Vue CLI, and we've taken a look at the default
"Hello World" component that came with it.
Next, let's take a look at how to create
our own component.