Introduction to Vue CLI

Published on April 28, 2017 by

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.


Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.