Introduction to Vue CLI

Vue CLI is a simple tool for scaffolding Vue.js applications, i.e. setting up a basic development environment and project structure. When doing so, one must choose a template, and there are currently five different ones to choose from.

First we have a webpack template, which includes a full setup with webpack and includes things such as testing. This is quite a complicated setup, and if you need to change the webpack configuration, then you will quickly end up having to dive deeper into webpack. However, if you need a fully fletched environment, then this is a good start.

The webpack-simple template on the other hand, is a much simpler setup with webpack, which is great for getting a simple environment up and running with the basics that you need while developing. This is the template that we will be using throughout this series, because it is simple and doesn’t require us to spend a lot of time talking about webpack, but instead we can focus on the Vue part of things.

The browserify and browserify-simple templates make use of the browserify tool, which basically takes a bunch of files and merges them together into a single file. The difference between these two templates are the same as with webpack; one is simple, and the other is fully featured.

The last template is one named simple, which is extremely simple. It just includes a single HTML file which includes Vue.js in a script tag by using the CDN. Then it creates a simple Vue instance within this file, and that’s it. This template is honestly not useful for us, because it doesn’t provide us with any of the features that we are looking for for our development environment.

I would recommend that you go with either of the webpack templates, depending on your webpack proficiency. If you don’t have experience with webpack, then you should go for the simple one. The reason why I recommend webpack, is because the tool has become extremely popular in the past couple of years. It is an extremely powerful module bundler and it should be fairly easy to find help online if you run into problems.

So now that you know a little about the various templates that Vue CLI offers, let’s actually go ahead and install the tool and create our first project using the webpack-simple template.