Getting Started with Vue.js

Allan Berry

Introduction

Vue.js fills the same niche as Angular and React.js: a client-side framework for building rich user experiences. However, I find it quite a lot simpler, and maybe better designed, than those two. It is open source, not affiliated with any major company (unlike Angular with Google and React with Facebook, respectively), created originally by Even You, and getting a lot of steam.

Often Vue.js is used with Vue Router (to support URLs) and Vuex (a state machine), which together provide a fairly comprensive, industrial strength solution for frontend systems. Vue CLI also gets used to jumpstart Vue projects.

This is a support document for a Vue.js workshop conducted at Chicago Code4Lib on May 16, 2018.

Tutorials

We’ll use these two tutorials:

  • Official Vue.js tutorial

  • Scotch tutorial

    • This tutorial uses a previous version of Vue CLI (v2, not the current v3 beta). So we will have to adapt it a little bit as we go.

Try and get the installation steps finished first, then you can start on the first tutorial when you’re ready. I will help anyone who has trouble, and we will catch up with you. Hopefully we can start the Scotch tutorial together.

Tools

You will need a web browser and a text editor.

Browsers for Development

Text editors:

Install

On a Mac? HomeBrew makes installation of lots of stuff easier. On Windows, you will probably have to use binary installers.

  1. Install Node.js
  • Mac, use your HomeBrew: brew install node

  • Windows, use the binary download

  1. Install Yarn, a nice JS package manager
  1. Install Vue CLI
  1. Get a new Vue instance
  • vue create my-project

  • cd my-project

  • yarn serve