- [Instructor] Now there are a few different ways
of creating a Vue project.
The most basic way,
and the way that you'll see if you visit Vue's website,
is simply by adding a script tag to an HTML element.
Again, as we just saw,
one of the main advantages of Vue
is the ease with which we can add it to an existing page.
So for example,
if we already had our site built on some other platform,
all we'd need to do is import the Vue library,
via a script tag,
and then we could start writing Vue code
for our site immediately.
However, when we're creating a new site from scratch,
and we know we want to use Vue for it in the first place,
there's a better way to go about this.
And that's by using something called the Vue CLI.
Basically, the Vue CLI is a set of command line tools
that we can install that take care of tasks
such as setting up and maintaining a Vue project.
And for those of you who are familiar with React or Angular,
both React and Angular
have their own similar CLI solutions as well.
So our first step here is going to be to install the Vue CLI,
here's how we do that.
We're going to say npm install dash g
at Vue slash CLI,
and hit enter.
And you may or may not need to use pseudo for this command.
And once that completes,
we're going to use the Vue CLI to create a new Vue project.
So let's navigate to the directory that you want to create
your new Vue projects directory inside of.
For me that's going to be repos.
And once you're there, let's run the command
Vue create
fsv
dash front end.
This is just what I'm going to call mine,
feel free to call yours whatever you want,
and hit enter.
And that's just going to ask me a question
because I have slow internet connection right now.
I'm just going to say no.
And running this command will bring up a few options for us,
and we're actually going to be using the default settings here,
but just so you can see what other options
are available to us,
let's select the manually select features option.
Okay.
And as we can see,
Babel and Linter are going to be selected by default,
we'll want both of these,
but there are also options for using TypeScript
for those TypeScript fans out there.
There is Progressive Web App Support.
Basically, if you want your Vue site to work offline,
among other things.
There's Vue Router,
which we're actually going to be adding later.
I'm not going to select it now
because I want to show you how to add these things later on.
And then there's Vue X,
which is a state management tool for Vue,
similar to Redux for React.
And there are also other options,
like CSS pre-processors, Unit Testing
and End to End Testing.
So without selecting anything else,
let's just press enter here.
And we're going to want to select the basic version of Vue here,
that's going to be two point X.
And then we're going to select
ESLindt with error prevention only.
And then we're going to leave it on Lindt on save,
and select in dedicated config files.
And finally, we're going to say no for saving this as a preset,
although if we had selected a more complex setup,
you might want to consider this option.
So we'll say no.
And finally, I'm going to choose to use npm for this,
because personally I'm more of a npm fan
than a yarn fan.
If you are more comfortable using yarn,
feel free to select yarn instead,
and just keep that in mind
with the future commands we'll run in this course,
okay?
So once we're done with that,
our terminal will run for a little while,
while it sets up our project
and installs all the necessary packages.
And once it's done running,
we can CD into the new projects directory
by saying CD fsv dash front dash end,
or whatever you called your projects directory.
And then we can actually run our project
by typing npm run serve and hitting enter.
And that will run our Vue project on local host 80 80.
So this is our Vue project.
Now obviously this is all auto-generated content,
and we'll be deleting most of it
to make way for our own project,
but that's basically how you use
the Vue CLI to create a new Vue project.