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.

Prerequisites:

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

Installation

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.

vue-cli

vue-cli

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.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This