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.
Table of contents:
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.
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.
This contradiction is behind some of the reasons you'll end up using Vue CLI on almost all of your new Vue projects.
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.
The reason for the difficulty is that, on a surface level, Webpack appears to be several unrelated tools rolled into one:
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.
Join our free four-part email course to learn the key changes in Vue 3 that you need to be aware of!
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.
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.
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!