Introduction to vue-cli

vue-cli is a utility that is brought to us by Vue.js Team. vue-cli is a utility that helps you to scaffold vue.js applications with various build systems. The various templates or project scaffolding that are available are as follows:-

  1. webpack
  2. webpack-simple
  3. browserify
  4. browserify-simple
  5. pwa
  6. simple

All the above templates are available for you to get started with the Vue.js project. So let’s get started with generating the Vue.js application using one of the templates. This will help us to get started with the Vue.js application.

Installation of vue-cli

In order to install the vue-cli go ahead and check the below-mentioned points.


  1. Node.js (>=4.x, 6.x preferred)
  2. npm version 3+
  3. Git


Run the below command in the terminal.

In order to create a new Project go ahead and type the following, here you can see the project template and the project name that you want to have.

Generating a ToDo List Project

In order to create a ToDo List project, let’s go ahead and scaffold a new project.

After executing the above code you will get some of the options on the screen you need to fill. We did fill them in the following format as shown below.

Now the project is ready, navigate into the project and install the node packages

Running the application is also very straight forward

You should be prompted to open the browser at http://localhost:8080 and then you should be able to see the below screen.



This confirms that your vue-cli has been installed correctly with the webpack template and the application is running fine.

This leads to the end of this tutorial. This clearly enables you to get your hands wet with the creation of scaffolding vue.js application.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This