Why Vue CLI?

If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities.

When you begin as a JavaScript web app developer you'll become aware of an important contradiction.

Web apps are meant to run in web browsers, of course, and so to make an app as performant as possible we need to ensure its code is compact and terse.

And to ensure the app is as broadly compatible across browser vendors as possible we try to develop it using the most popular version of JavaScript, not necessarily the newest.

The contradiction is that as the developer of that web app you'd rather make the opposite choices!

Firstly, you want your code to be easy to write and comfortable to read. Such code will almost assuredly not be compact and terse.

You also want to use as many modern JavaScript features as you can since they're being added to make the language more powerful and easier for you to work with.

This contradiction is behind some of the reasons you'll end up using Vue CLI on almost all of your new Vue projects.

JavaScript development tools

JavaScript developers have come up with some clever solutions to this contradiction by creating development tools like Babel.

Babel's job is to transform modern JavaScript code into older JavaScript code to ensure it's broadly compatible across browsers. It does this by leveraging the fact that often new JavaScript features can be expressed less elegantly as old features.

For example, const was only added to the language recently to provide a variable type that couldn't be reassigned. While many browsers support it now, you still might not use it in a production app as older browsers would see const as invalid syntax and throw an error.

Babel users, though, can use const in their source code and Babel will "transpile" it into older code by converting each instance of const to the broadly-compatible var and creating a manual check that these vars are not overwritten.

In this way, Babel allows you to write a JavaScript app using many modern features without any regard for whether or not these features are supported in enough browsers.

Babel is just one of several important JavaScript development environment tools. Some of the others include ESLint which ensures your code style is consistent, TypeScript which allows you to write type-safe JavaScript code, and vue-loader which allows us to use the famous single-file component format in development and end up with highly-performant render functions in production.

Webpack

This brings us to Webpack. Webpack is one of the most important JavaScript development environment tools but is also one of the trickiest to understand.

The reason for the difficulty is that, on a surface level, Webpack appears to be several unrelated tools rolled into one:

• Module bundler
• Build pipeline
• Development server

Once you get the hang of Webpack you'll see why it makes sense that it should have this Swiss army knife architecture.

I'm going to skip an explanation of the module bundling feature of Webpack even though it's the most important and most misunderstood aspect of Webpack. If you want to dive down that rabbit hole, I'll refer you to another article of mine called Jargon-Free Webpack Intro For VueJS Users.

Let's discuss the build pipeline aspect of Webpack. Webpack can take your source code and put it through a variety of transformations and transpilations that different tools like Babel, ESLint, vue-loader, etc can provide, spitting out well-optimized, browser-compatible production code.

The primary way of using Webpack is calling it from the command line and providing a configuration file where you've specified the various development tools you want to integrate.

Which brings us to the development server aspect of Webpack. You can have Webpack transform your code on the fly as you write it and make the output available for a browser to view on a local port.

And with an additional feature called hot module reloading, Webpack can update your live development app without a manual browser refresh.

You'll never want to develop a JavaScript app any other way!

The original Vue CLI

The only problem is that Webpack is notoriously tricky to set up. Let's say you wanted to develop a Vue app using Webpack. You'd typically spend the first half an hour or more just wrangling your Webpack config.

Most of the time, though, developers want the same things in their development environment - Babel, ESLint, hot module reloading, etc - with their default configurations.

So the idea of the original Vue CLI was to provide a command-line tool allowing developers to create new Vue projects with pre-made best-practice development configuration templates (usually involving Webpack).

Some of the a-la-carte templates provided by Vue CLI have names including "webpack", "webpack-simple", "pwa", etc, highlighting the key development scenario they're designed for.

Vue CLI 3

While the original Vue CLI was often useful, for more serious projects it offered little net benefit. When you inevitably ended up needing to customize a Vue CLI template to include a non-negotiable feature for your project that it didn't have, you'd end up spending the same amount of time unpicking the template to add your feature that you would have spent setting it up a config from scratch.

So for version 3, Evan You designed a brand new architecture to solve this problem. Rather than simply providing a Webpack template, Vue CLI 3 would be a fully-functioning wrapper around Webpack. This would allow for increased flexibility compared to using templates while still being essentially "zero-config".

This was a very ambitious but ultimately highly successful re-design and has made Vue CLI an indispensable tool in the Vue ecosystem. Now, Vue projects of all types can have an out-of-the-box best-practice setup in little to no time.

If you'd like a more thorough breakdown of the features of Vue CLI 3 and the complete story on how it was created, check out my article Vue CLI 3: A Game Changer For Frontend Development.

Current state

The current version of Vue CLI, version 4, has continued to build on the feature set of Vue CLI but has not deviated majorly in its architecture from version 3.

So that brings me to the end of our journey through Vue CLI's evolution and the reasoning behind its existence.

If you're ready to learn more about Vue CLI the next step is to start using it!

https://cli.vuejs.org/