- [Instructor] One of the nice things about Vue.js
is that it lets you work with its API
by including a simple script tag in your HTML documents.
This is a lot like what you do
when you use something like jQuery or Bootstrap.
Now if you want to create more complex applications
that use additional plug-ins or modules,
you want to use something called the Vue CLI
which you can get to at this URL.
Now before you do that though,
you need to make sure that you have Node.js
which you can get from here,
and it's a simple installation on your platform
as well as Git.
Now if you're downloading Git and you're on a PC,
make sure that as you go through the installation,
you also install something called Git Bash.
That allows you to run Linux-like commands on PCs.
So to install things, once you've got those two done,
you want to go to this URL
and then click on this Get Started button
and then click on over to the Installation
and do an NPM install minus G and do a Vue CLI command.
So let's go.
I'm going to use this terminal called Hyper.
You can use the Mac terminal or Git Bash if you're on a PC,
and I want to make sure that I'm in the desktop.
So I'll switch over to the desktop with this command,
and then I'm going to issue
this NPM install minus G at Vue CLI.
Great, once that's done,
let's go ahead and clear the screen,
and we can now create a Vue.js application
using the Vue create
and the name of the application that we want to create.
So I'm going to call mine vue-apis.
Now before you do this, if you're on a PC,
this command is going to be slightly differently.
This is going to run an interactive terminal,
and that's not going to work on Git Bash normally.
So you will have to run a command called winpty
and then vus.cmd create vue-apis.
So let's go ahead and create our Vue application.
Again, use the PC command.
When you run that, you're going to be offered
a series of options, and the first one is to pick a preset.
Now here, if you know what you're doing,
you can select the features manually,
or you can stick with the default installation.
So let's go ahead and manually select features
because I do like to customize how I do things,
and I want to make sure that I choose Babel
because it makes my project work with older browsers.
I'm going to use a linter formatter here,
and I am going to turn on CSS pre-processors
because I want to use Sass instead of normal CSS
with this project.
I'm not going to use the router,
and although I'm going to be using Vuex
much later on in the project,
I'm not going to turn it on right now.
We'll do that a little bit later.
So once you choose the options,
and I'm hitting space to choose any of these options,
I'm going to hit return,
and then you want to choose which processor you want to use.
I like to use Sass/SCSS with node-sass,
so I'm going to choose that one.
And then for a linter, you can choose your own.
I like to use ESLint and Prettier as the default,
and I like to lint on save.
So here, you also get to choose
where you want all the configuration to go,
and it really doesn't matter.
I think that in package.json is a little bit cleaner.
It creates less files in the root level of your project,
so I'm going to choose that.
And then it always asks you if you want
to save this as a preset for future projects.
I don't want to do that right now,
but if I think I'm going to be
using the same setup in other applications,
you can choose yes, but I'm going to hit no right here,
and this is going to take awhile
to create a project folder for you
that has all the options that you've picked.
Alright, once that's done,
it's going to give you a couple of commands
that you can use to run a development server.
You can see them right here.
Now I'm going to go ahead and open this folder up
in a text editor.
I'm using Visual Studio Code for this project.
So now I need to go ahead and run those commands.
So I'm going to open up the terminal
that comes with Visual Studio Code
by going to this terminal menu.
I can also use this command key right here.
On a PC, you may want to use Git Bash,
and I want to make sure that I can run
the npm run serve command.
This'll start a development server,
and it's going to allow you
to open up the project in a browser.
So I've got a browser here handy,
and I can actually hit Option + click on this link
to open the application up in my browser,
and now I can go through and take a look
at what Vue.js has created for me.
I'm always going to start each one of the videos
with this preview already running.
So although I'm going to close this terminal,
at the beginning of every video,
I'll have this automatically running,
and now we can take a look at how Vue.js creates the files
and how we can add additional plug-ins or modules
into our application.
We'll take care of that in the next video.