Vue Hack Night Program

hack-night-vue.md

Vue

Welcome to the Hack Night!

If you have not already, you can register for this event.

You know me. You can follow me just about everywhere, but especially on Twitter @ryanmr.

Tonight's Program

Tonight's program looks like this:

1. Presentation (follow along if you like)
   • Introduction to Vue
   • How It Works
   • Syntax & Patterns
2. Workshop: Practice with a Simple Kanban
3. Presentation
   • Vue Components
   • Vue CLI
   • Vue Router
   • Vuex
4. Workshop: (time permitting)
   • Practice with the Vue CLI
   • Practice understanding a component based SPA

Setup

For the first half of the night, you will just need a computer with Google Chrome and some kind of Internet connection, as we will use the Codepen below as our initial workspace.

For the second half of the night, you will need node, npm, a provided repository and some text editor. Consider getting these tools and resources before arriving, or at least starting the downloads early in the night because they can take a while.

1. Setup node and npm for your environment - how to
2. Run npm install -g vue-cli - vue-cli github
3. Clone this repository and follow its setup instructions (i.e. npm install)
4. I highly recommend VSCode and the Vetur plugin.

Immersive Learning Code Examples

• Simple Data Binding
• Two Way Data Binding
• Conditional Binding
• Repeated Binding
• Methods and arguments
• Events
• Property Binding
• Property Binding and Created

Practice with Simple Kanban

• Simple Kanban Practice Guide
• Simple Kanban - Start Here Codepen
• Simple Kanban - Completed Version Codepen | Completed Version Fullscreen

Links

Vue

• Vue
• Vue CLI
• Vue Router
• Vuex
• Vue Comparison
• Awesome Vue

Friends of Vue

• React
• Angular
• Mithril
• Svelte
• Marko
• Inferno
• NX
• Preact

Links

• Framework benchmarking

Sources of Knowledge

• JavaScriptMN

Feedback

• Less annoying Linting Defaults

Closing

Watch out for cars, and have a good one.