net

PROJECTS
Vue.js and Webpack

VUE.JS AND WEBPACK

simple but effective animations. We will also be

using the new ES6 JavaScript syntax throughout, so

having basic knowledge about that would be good.

USING VUE.JS

There are a couple of ways to get started with Vue.

js, either use the CDN link in your HTML (which is

without doubt the easiest way) or you can install it

using the Node Package Manager (NPM) or use the

command line interface – which is what we will be

doing in this tutorial. We’ll be using Visual Studio

Code for this tutorial as we can simply use the built-

in terminal.

GETTING STARTED

First, we need to install the vue-cli. The command

line interface is available as an npm package. So

make sure that Node.js and the npm command is

BUILD A SINGLE-PAGE APP

WITH VUE.JS

Learn how to install Vue.js using the command line interface (CLI) and

build a basic single-page application with CSS animations

ABOUT THE AUTHOR

NEIL PEARCE

w: neilpearcedesigns.co.uk

t: @neilpearce

job: Front-end developer

and designer

areas of expertise:

All-round front-end

developer, style guides,

pattern libraries,

architecture, team work,

speaking, workshops

If you know JavaScript, then you also know

about the endless line of frameworks that help

make coding easier and faster. If you didn’t already

know what Vue.js is, it’s a progressive JavaScript

framework, which means if you already have a

server-side application, then you can plug Vue into

just one part of your application. Vue focuses on

building user interfaces and it only works in the

‘view layer’; it makes no assumption of middleware

and backend and therefore it leaves you free to

integrate other libraries and tools, and can be

entirely used to build more robust single-page

applications (SPA). Vue is very much like React where

it also uses such things as a virtual DOM, props and

state. While there’s much more Vue can do, in this

tutorial we will go through the basics of setting up an

SPA using the vue-cli, with Webpack as our bundler/

build tool. Then we will look at how we can create