- [Instructor] Although you can work with Vue.js,
by simply adding a script tag, to an existing HDMI page,
if you want to work with more advanced
features like routing, you're going to want to work
with a more powerful build tool.
Now this is also what you would want to use,
if you want to create an application,
instead of inserting Vue.js into an existing web site.
So an application won't mean,
that the entire project is going to be essentially just
a vue.js app instead of sort of part of something else.
So, the official tool for building applications with Vue.js
is the Vue CLI, CLI stands for a Command Line Interface,
and you can find that of course at this you are url,
and you're going to need to use
these in a terminal application,
I'm going to use something called Hyper,
which you can get at hyper dot.io,
to issue my commands but you can also use the Mac terminal,
or if you're in a PC something like GID bash
so that you can run Linux Style Commands.
Now this does have a few requirements,
so you want to make sure that you've previously installed,
a version of No js,
as well as get,
and you can find get at this you url,
and if you do go through the gate installation
on a PC I suggest that you use,
the get bash application
that comes with the Get installation.
So let's take a look at how this works now,
to install the CLI,
we're going to need to issue an NPM Install Command,
and we're going to use the Global option so we'll do minus G,
and then I'll use at signed to save vue/cli.
Alright, once it's done,
let's go ahead and issue a clear command,
your list might look a lot longer than mine,
when you run the Install Command,
and then you can create a project
by issuing the Vue Create Project.
Now before that I want to make sure that I'm on the desktop,
so I'll do cd, and then I till this /Desktop here.
And now I'll do a vue create,
and I will say,
vue-essentials here.
Now here you're going to be met with this option here
where it shows you that you can either pick the default,
or manually select features.
So I'm going to show you what the manually
selected features are,
if you choose that you're going to notice that
it's already actually showing you that babble
is going to be installed by default,
and then a linter formatting as well.
So you can turn these features on and off,
you can hit the space to select something like TypeScript
or hit that again to undo that,
you can choose anything else you want here.
Now you can come back and install some of these later.
So essentially battle allows you to write JavaScript
so that it works in older browsers is going to handle
the transpiring of your code
into a more compatible version of JavaScript.
Typescript allows you to work with types,
progressive web app support it's going to give your
application a little bit of offline support
and the ability to work with different browsers
a little bit better on mobile devices.
The router is something that we're going to to use
but I'm not going to install it right now
because I'll show you how to install things
after you have done the default installation,
I think that's a bit more useful.
Vue.js is sort of the default way that Vue.js
allows you to work with data
so sort of like a data model for view,
CSP processors allows you
to work with things like SAS or post RSS,
so if you're interested in that
you can choose that in the installation.
Linter for matter will install a few things
that will make it a little bit easier to debug your code,
that's why it's a default,
and then there's a couple of options
for different types of testing,
but these are pretty much what I want.
Actually, the default installation
would have worked just fine for me.
So I'm just going to hit return again,
and here you can pick,
what types of lenders you want to install.
So I'd really like to use prettier,
it's just a module that makes it easier
to work with your browser.
It's like automatically formats things for you,
so this is my current favorite,
so I'm going to choose that,
and I want to go ahead and lint whenever I save.
You can sort of fix it whenever you commit,
but I like lint on safe,
again these are just some different options,
for how you work with files.
Where do you prefer placing the config for babble?
I personally like the stuff
for configuration in my package,
that JSON it's easier to find it.
Declutters the sort of a project a little bit,
so I like that.
And then if you want to you can save
whatever you just chose as a preset.
I'm going to choose now,
I don't really need to do that,
but you may want to choose,
yes, and then give it a name,
and next time you run out of Vue CLI,
it's going to give you that as one of the options,
that you can choose.
So once you pick whatever you want, you can head return,
and it'll start installing the project.
All right, so once you get done,
it's going to give you a couple of options
to run this project, and what you want to do is CDE
and then the name of the project.
And once you're in there, you can run npn run serve,
this will, start running the development version
of the server and it's going to process the product
and allow you to pull this up in a browser.
So it's going to give you this link to your browser
so that you can open your project up,
and take a look at what it's already built for you.
Alright so we still need to learn
a little more about the CLI,
and what it's actually done for us.
So we'll take a look at that in the next video.