Getting Started with Vue.js: Lesson 23 of 25


Up Next

Vue Devtools

Autoplaying in 7 seconds!


The Vue CLI makes working with Vue a simple process. It handles a lot of the behind the scenes busy work so that you can start creating Vue apps quickly.

Vue has a few templates that you can generate apps with:

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • pwa
  • simple

Vue can bring in a tool like webpack in order to handle complicated processes like:

Table of Contents

    Why Use the CLI?

    The CLI will handle a lot of the development tooling for us so that we don't have to. When building apps, we would much rather worry about what makes our app unique rather than the build tools or our setup configuration.

    The CLI gives us build setups and fast startup so we can focus on building our apps.

    Installing the CLI

    We'll use npm to install the CLI globally:

    npm install --global vue-cli

    Once we have the CLI installed, you can check what version you are using with:

    vue --version

    Using the CLI

    Next, we can start building out applications with the above templates.

    Here's how we would create an app called my-new-project with the CLI's webpack template:

    vue init webpack my-new-project

    You'll be prompted with many options and you'll see lots of important things the CLI can do for us:

    • Adding vue-router
    • Adding an ESLint config
    • Adding unit tests
    • Adding e2e tests
    • Installing dependencies

    The Files

    Here we can see all the files the CLI adds for us. We have the foundation for a large scale Vue app:

    The Instructions

    Vue will give you instructions after it creates the application to install the dependencies and start developing:

    cd my-new-project
    # install dependencies
    npm install
    # start the app
    npm run dev

    Developing with the webpack Template

    The webpack template gives us a convenient way to run a development server with webpack-dev-server.

    webpack-dev-server will automatically refresh our browser on changes. This is a very convenient feature that allows us to develop quickly.

    Other Templates

    The other templates will give you different setups. The webpack template is most common. The webpack template provides a full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

    The webpack-simple template will give you a webpack Vue app that is similar to the webpack template but without testing and routing.

    The simple template will be a basic HTML page with a drop in Vue <script> tag.

    The pwa template is based on the webpack template and will add in some progressive web app features

    The browserify templates are similar to the webpack template but use Browserify instead.

    Chris Sevilleja

    173 posts

    Co-founder of Slapping the keyboard until something good happens.