- [Instructor] Let's walk through the different options
that you're presented with when working with the CLI.
Now to get started,
I'm going to issue a cd ~/Desktop command here,
to make sure that I'm on the desktop,
that you can place these files wherever you want.
It's just more convenient for me as I'm doing this course
to show you the installation in the desktop.
Now, once I'm here, I can issue the Vue command.
So I'll say Vue, create and then a name for my application,
and you can use kebab case here.
Now, if you're using Gitbash on a windows machine
you'll have to run this a little bit differently.
You'll have to say winpty, and then vue.cmd,
and then the same create my-app command.
Now, if you're running PowerShell you should be able
to just use the Vue create and then whatever name you want
for your application.
We're going to go ahead and choose this option.
And now you're going to be presented
with a number of questions.
Now, the current version of the CLI shows you
that you can choose between Vue two and three,
and Vue 3 right now is a preview,
so this menu might look a little bit differently.
Eventually, I think Vue two will go away
but you can see that I can install a couple of modules
by default, either babel or ESLint.
I'll talk about what those are in just a second.
Now, the last option is to manually select features,
which a lot of times is what I choose,
but we're going to be working mostly
with this default template.
But I want to show you all the options,
so I am going to go first
through this manually select features.
Now in here, what you want to do is
go to whichever module you want to install
and then hit the space bar to select it
and the space bar to de-select it.
So I'm going to go ahead and pick everything.
And I'll go through what these different options are.
First, since you're doing things manually
you're going to need to choose which version
of VueJS you want to use.
You definitely want to work with Vue 3 in this course.
Next up is babel.
Babel helps you write JavaScript with a module structure
that gets converted into JavaScript
that can be more backwards compatible
with a lot of different browsers.
TypeScript is a language from Microsoft
that is similar to JavaScript but gives you
additional features like strong typing.
Progressive Web Apps or PWAs, make it easier
to create sites that run well as phone applications.
Routers help you build single page applications using VueJS.
So in a single page application,
the Router would manage your quote-unquote, other pages,
and will still give you the feeling
of having multiple pages,
but run as a dynamic web application.
Vuex is an advanced way to manage your data.
Although this is one of the ways
that Vue lets you work with data,
there are other options that you can use, like Firebase,
MongoDB, or just about anything else.
It's just that Vuex is sort of the official implementation
for managing complex data with VueJS.
CSS Pre-processors allow you to work with libraries
like Sass or Less or even Stylus,
that let you have additional features in your CSS.
A linter formatter it lets you choose a module
that will check your apps for errors, like ESLint,
and formatting modules like Prettier.
Unit and end to end testing lets you choose options
for running unit tests with your applications
like Mocha Chai, or JAST.
Let's go ahead and hit return.
And here you're going to be asked a number
of additional questions for each of the items
that you installed.
So here we need to choose first the version
that we want to start the project with.
Of course we're using Vue 3.
And then the next question is a TypeScript question.
Do you want to use the sort of classic
class style component syntax or something else?
I'm not really going to use TypeScript,
so I'm just going to leave it alone and I'll say no.
And you can type in the N
or just hit Return for the default.
Now here, it's going to ask you
if you want to also use Babel with TypeScript.
Again, this is a TypeScript question
and it's required, of course, for some features to work.
I'm also not going to be working with TypeScript
but I did want to show you the option.
This next one is a router question.
Now it's asking if you want to use history mode for router.
Normally when VueJS works with the router,
it's going to add a little hashtag at the end of your URLs.
And that makes the URLs look a little bit uglier.
You can remove that by using history mode,
but it does require that you use a server setup,
which if you don't have, it's just easier
not to use router mode.
So I'm going to not use that, or,
actually, I think I did pick it.
The default was yes.
So I did pick it, but it doesn't matter
because I'm going to cancel this at the very end.
Next up is which pre-processor do you want to use?
And here the options are Sass with dart-sass,
or Sass with node-sass.
Just, I think, yesterday, node-sass was actually deprecated,
so this will not be an option soon
and you'll need to use dart-sass.
And there's a couple of older CSS Pre-processors
One is called Less, it's not really that popular now,
but you can still pick it from here.
And this is Stylus, which is sort of a shortcut language
for writing CSS.
If I had to pick one of these,
I would pick Sass with dart-sass.
Next up will be a linter formatter.
So linter is something that can check your application
for errors, and a formatter just reformats your code.
It can do it whenever you save
so that it looks great and more consistent
once you set up the rules on different editors.
Here, my choice is normally ESLint and Prettier,
but you can choose any of these other configs that you want.
Now, it also usually asks you
if you want to lint every time you save,
or if you want to lint and fix
whenever you commit something.
I like to pick usually lint on save.
That way I can see what it's doing as I'm typing.
Here, you can choose either a Mocha Chai or JAST
as a unit testing solution.
I have no preference, so I'll just leave it as Mocha Chai.
And there may be some additional questions
of what you want to do here for the E2E testing solution.
I have no idea what any of these are.
I've heard of Cypress before,
but I'm not familiar with these other ones.
So I'll just choose whichever one.
All right, this is important.
It asks you, "where do you prefer placing the config files
"for Babel, ESLint, et cetera?"
Normally, these will be in separate files in your directory.
A lot of people don't like their directory
to get very messy.
So you can actually add them to a special file
so that they all go, or most of them will go
in this package, that .json file,
instead of in dedicated config files.
This is sort of a tab versus spaces question.
I'm going to leave it in dedicated config files.
Now, the last question is going to be
if you want to save this setup
so that you can use it in any of your future projects.
As I mentioned, I am going to hit Ctrl+C now
because I don't really want it to do all this stuff
instead of the project this way.
And I'm going to clear this out
and then just run my command again.
And I'm going to pick the default option
and we'll see what happens.
So default, but I do want to use Vue 3 preview
and I'm going to hit return,
and it's going to create the folder for me
and go through the installation process.
It's installing a lot of things,
about like 70 or 80 things, and it's going to take a while.
Once it's done, it's going to show you a couple of commands
that you can use to get started with your app.
Now I'm going to ignore these
because I want to open this up in Visual Studio Code
to take a look at that folder
but you can run the automation straight from the terminal
if you want, by using these two commands.
We'll pick this back up in the next video.
There's a lot to discuss
about the files that have been installed.