Vue CLI

[00:00:00]
>> So let's dive into the next piece that is the core foundation of most production grade level Vue apps, especially when it comes to fact that it's taken over the entire app. The Vue CLI is at the core of everything. So let's go ahead and start by giving an overview of Vue CLI for those that haven't used it before.

[00:00:18]
Basically what it does is it is a command line tool that allows you to build out or scaffold out a view app with all the webpack stuff already configured for you, so that there's less work for you to do. And you can focus on building things. And so if you jump into our VS code so let me switch and then open the file.

[00:00:40]
So what we have here inside of VS code, which is the production grade view app that you will download it from the GitHub repo. This is actually an example of basically the bare minimum that Vue CLI does for you out of the box. So as you can see here, it's already configured bubble Is gone ahead and make sure you have all the various dependencies that you need to get view up and running hot module reloading, whatever it is, it's a tries to do all of that for you out of the box with very little configuration.

[00:01:09]
You didn't go to the point of, if you're configuring es lint, try to include some of the rules and these sort of things browser lists, again, the goal is to get you up and running as quickly as possible. And so, this is super beneficial when it comes to having this enforced structure.

[00:01:24]
And so, as far as like the directory structure, here we see this is very standard amongst most single page application frameworks these days where you have your source directory that contains like the assets that might need to be run through Webpack. The various components that comprise of your application, as well as we saw before our app.view, which is our Global Entry into our view app.

[00:01:44]
And then there's this main.js file that simply is boilerplate for saying, hey, when the page startups go ahead and mount our application to the page, and so most of the time, you're never ever going to touch this page because this is a fairly standard entry point. This is what Vue CLI does out of the box.

[00:02:02]
And so as far as what that experience is like locally, so I'm going to go ahead and switch over here to my terminal. Once you've installed Vue CLI, which you can, again as far as the ducks go, let me switch this Vue CLI you can check out the Vue CLI for the full features of the docs.

[00:02:21]
But as far as getting started with it, once you've installed it locally on your machine, using, NPM install globe Vue CLI. It has a really nice experience for creating apps. So in case we're creating, again, let's say a base, in case we're creating, creating a basic to do MVC, for example.

[00:02:38]
What it does is it actually allows you to prompt you for the various things that you care about. So in this case, let's go down to the menu and select features. And so here there's a nice interface as far as checking out what you're interested in, right? What do you wanna configure?

[00:02:52]
We wanna choose what version we want whether or not we want Babel. And so when we hit spacebar, you'll see that actually toggle things on and off. And so going through this allows you to actually basically pick the various configurations that you want inside of your applications. Which is really nice because again, I don't know about you, but reading through documentation to figure out how to make things work is probably one of the lowest things on my list when it comes to building the next cool thing.

[00:03:14]
So being able to just come here and go, yeah, I'd be interested in a CSS preprocessor. And yep, I want, view router, for example. And then as you go through, you can then choose the various things, you know, I want three configure whether or not I want router, choose which version of preprocessor I want.

[00:03:31]
And then you can go through and just basically configure things as you would want, which is super nice. And so CLI are fairly standard when it comes to a build tools going forward. But what many of you might not know about It's that Vue CLI- GUI mode. And so for those who aren't familiar with what GUI is, it stands for a Graphical User Interface.

[00:03:54]
And so what I'm gonna do right now is I'm gonna run the command view UI. And so what this does is let me zoom out a little bit Is that this actually is as you can see a web app that's built around the command-line interface. And so it is basically designed to make our lives a lot easier when it comes to managing configurations and doing things that we might normally have to memorize inside the command-line.

[00:04:21]
For example, I don't know about you. I've had plenty of times where node failed to properly kill off certain ports. This here is right here. So if you know that something's on 3000, you would hit 3000 hit kill. You would take care of it for you. No more Googling to see if it's is it like killed dash L L S O F.

[00:04:38]
None of that. It's there. You can just use it. On top of that, you can go in and see what kind of plugins there are. Easily seeing the versions whether it's the latest, you can see if it's official, get more info on it. You can even install plugins from here.

[00:04:53]
Inside of Vue CLI, tracking dependencies becomes a heck of a lot easier, right? It's so much easier to see what's going on because package JSON is nice, but you lose a lot of this meta info. That could be that really should be automated and provided for you. And one of my favorite things with the Vue CLI is that configuration becomes so much easier.

[00:05:13]
So in here you can see that you can configure where your public path is where the output directory is. You don't have to go into documentation to figure out what options inside of the JSON match to this thing. And so particularly this is particularly true, at least for me when it comes to things like ESlint.

[00:05:31]
So if we're to, we're looking at rules, you can go through and actually check off, I don't want this rule. I only want the warning. I want the error and less, is it too first? Is it error first? Gosh, I can't remember. And so this is one of my favorite things about UI is this abstracting these things away, so that I can focus on what's important, which is solving problems, and then moving on, rather than sitting there and figuring out how to configure something.

[00:05:58]
On top of that, Vue CLI does really well is that when you run something basically yaden or your surf command, whichever you prefer One of the things it does here you'll see that it has basically a bunch of statistics for you so I'm gonna blow this up a little bit so it's easier to see.

[00:06:13]
It'll actually tell you how big everything is from assets, modules dependencies you can see some basic speed stats that it like basically the algorithm determines how long it takes based on different network speeds. You can even see also how big your apps are in relation to one another.

[00:06:30]
And so whether it's, the view dependencies what have you installed this is how you can tell the, I'm importing all of low dash when I only needed one function, right because it'll tell you by the way you're built chunk is going to look like this. And in case you're yeah, I don't want to read don't worry, Vue CLI has got you there too, because we have an analyzer too.

[00:06:49]
So the team of Vue CLI even had the foresight to go ahead and then just visualize for you just really quickly where everything's coming from. And then you can go ahead and jump down and figure out like, what exactly within that is, taking up what space. And so this is a again, it's a primarily a developer experience improving but I think it's a pretty important one.

[00:07:09]
From just allowing us to get to the root of our problems, which is trying to solve things and build new features, rather than simply just sort of all the configuration details, and so in, in case you're wondering, so this is basically a dashboard, you can import various projects into it.

[00:07:25]
You can even create new applications from here and so you can see it actually sees my entire folder directory. So again, we can actually create a brand new project from here using and then using the GUI instead of the CLI. To configure things like that, I prefer yarn that it's to do MVC.

[00:07:40]
And then to even go through and then say that, hey, like which presets do I want? How do I want to configure and, I know my experience has been really nice using this. So something I want you to keep in mind when sort of not only creating new applications, but when you're actually running your apps to leverage view UI to allow you better insight into your application.

[00:08:01]
Here is a pro tip that a lot of people might not realise, especially if you have some legacy app that's been on view for a little while. Vue CLI has something called modern mode. And so what is modern mode. So as we all know right one of the great things about Babel when it comes to JavaScript, it allows us to transpile use the latest features of es six right we like arrow functions we conflict and those sort of things, and that it transpiled it down so that basically even if browsers don't support basically the essex functionality, we have the polyfills we're good to go.

[00:08:34]
But traditionally though, this often meant with traditional bundling methodologies that users were shipped at the entire code base, even if they needed it or not. So meaning they were getting larger bundle sizes, even though they did not need it. With Vue CLI as long as you enable modern mode, what this does is this enables Vue CLI to build two different versions of your app.

[00:08:54]
So one is it allows you to build a modern bundle that target browsers that supports ES modules. And then it splits off the legacy bundles so that it targets older browsers that do not. And so if you were to run this in the terminal, the way you would do this is you have your Vue CLI build command, you simply tack on the dash dash modern flag in order to enable this to happen.

[00:09:18]
And believe it or not, once you've done that there's no additional steps needed. You don't need to go into like the server to configure something, there is more information on the Vue CLI doc's site as far as how they do it. But at a high level, basically, there are different script blocks that HTML can recognize as far as, if it's es, ES modules, use this, otherwise use this.

[00:09:38]
And so Vue CLI will automatically do all that configuration for you. And so you'll get that performance boost just by simply enabling the flag. And so if you're wondering, okay, can you also do this from the UI? Absolutely you can. So here, you'll let me go back to the yep, clear product creation.

[00:09:59]
So in here, we'll see that inside of our configuration, or sorry, inside of our tasks. When we look at our build, we can check out the configuration, right? The parameters that go into our build process. And you'll see that modern mode here is an option as well to allow app to targets modern browsers with that automatic fallback.

[00:10:16]
And so looks like going forward in view three. It is enabled by default, but I would definitely recommend checking your app to make sure that that is turned on because it's such a huge win from a performance piece