warsawjs-workshop-12-be-a-milionaire

A Vue.js workshop project. Goal of this workshops is to create clone of the Be a Milionaire game. It's a very popular TV show, where contestants can win up to 1 mln $.

Rules

User will face set of 10-15 questions with increasing difficulty levels. Each question has 4 answers, only one correct. First incorrect answer ends game.

Vue.js features used in workshops

Template syntax

• interpolation (plus v-once)
• raw html v-html
• one-way binding v-bind (:)
• conditionals v-if / v-else / v-show
• events v-on (@)
• two-way binding v-model
• iteration v-for
• special directive v-cloak
• class and styles
• where to put javascript?
• transitions and animations

Components

• data
• methods
• computed
• watch
• slots (default / named)
• lifecycle
• nested components
• props
• single file components
• pure functional components

Reusability

• mixins
• plugins
• extends
• filters
• custom events
• custom model

Advanced

• render function
• reactivity in depth
• State management with bus

Vuex

• store structure
• access from components
• mutations
• actions
• getters
• namespaces

Router

• templates router-link and router-view
• defining routes name, path, component, children
• programmatic navigation $router.push and $router.go
• advanced - guards
• advanced - meta and multiple components

Tooling

• vue-cli

Start

To start, go to branch starting-point (here) and follow instructions in README.md file.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.