Installing and Getting Started with Vue-cli

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.

$ npm install -g vue-cli

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.

$ vue init <template-name> <project-name>

Generating a ToDo List Project

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

$ vue init webpack todolist

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.

$ vue init webpack ToDoList

? Project name todolist
? Project description A simple Vue.js List
? Author thewebjuice
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

vue-cli · Generated "ToDoList".

To get started:

cd ToDoList
npm install
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

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

$ npm install

Running the application is also very straight forward

$ npm start

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.


Originally published at The Web Juice.