Vue CLI

The Vue Command Line Interface (CLI) allows us to quickly scaffold new Vue projects with a variety of different template options. Currently, the template options available include technologies such as Webpack, Browserify, and Progressive Web Application features.

Sure, we could create our own Vue application and manually add tools such as Webpack, but this creates technical overhead in the sense that we have to learn, build, and maintain our configuration. The Vue CLI does this for us while maintaining a select set of official templates, but doesn't restrict us from modifying the generated Webpack configuration. All of this allows us to generate new unopinionated Vue projects.

To start using the Vue CLI, let's ensure we have it installed:

npm install vue-cli -g

We can then use the Vue init command to scaffold a new Vue project using the Webpack template:

vue init webpack-simple my-vue-project

On entering the preceding command we should get the following as shown on the Terminal:

If we break this down, we're essentially initializing a new Vue project based on the webpack-simple template named my-vue-project. We're then navigated to a wizard process that asks us for more metadata about our project. This metadata and configuration will differ depending on the template you choose.

Let's investigate the files and folders that the template created:

Notice how we're no longer working with .js files, and we now have .vue files inside of our src directory. A Vue file is known as a Single File Component and it has a template, script, and style tag, allowing us to scope everything to this component only.

This is possible due to our Webpack template, as we have a custom "loader". How does this work? Prior to looking at this, let's take a quick detour and review modern JavaScript build systems.