Vue.js explained through pokemon
This is a multipart series that will range from shifting to a component-based approach to little, more general, tidbits like using animations and promises, based on another article called Vue.js Pokemon Battle Tutorial. It is essentially a guide to help rebuild the Pokemon battle stage, providing insight to Vue's features which are being used.
This series is meant for people who do have a basic understanding of Vue js.
Five part tutorial to rebuild a Pokemon battle stage.
- Single file components This tutorial shows how to setup a work flow to use single file components, splits the previous code base into 2 components and touches on computed properties.
- Attacks: $refs, Promises & event bus The second installment brings back the attack functionality. 2 different implementations are discussed to explain $refs, promises & events.
- Vuex: state management In this tutorial we're separating our state into a global state store.
- Damage calculations Traditional Pokemon attack damage calculations gets discussed in this article, we implement this through a Damage class.
- Transitions & animation Let's make use of Vue transition when Pokemon appear/faint and add some textual info when an attack is, for example, super effective through reusable transition.
I was surprised how fast I read through it and how easy it was to actually rebuild a Pokemon battle stage.
Learning Vue.js through Pokemon
A repo that contains the code for the tutorial series is available here. By Maxim Kerstens.
