Getting Started with Vue.js

Using the Vue CLI

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:

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.

Like this article? Follow @chrisoncode on Twitter