Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.
/ example-vue-workshop Public archive

Example vue application used in workshops

Notifications You must be signed in to change notification settings

nsftx/example-vue-workshop

Repository files navigation

Vue Workshop

This is a repository used for Vue Workshop. Workshop will be held in span of three days, six active hours of work each day.

Prerequisites

Attendees will work along the presenter on their computers. It is required that they each have installed:

  • Visual Studio Code
  • Node.js
  • NPM Package Manager
  • Vue CLI

It is required that attendees have a basic knowledge of JavaScript, HTML and CSS. Knowledge of CSS pre-processors and JavaScript frameworks is good to have.

Schedule

Day One

  • Start: 09:00
  • Presenter: Jadranko Dragoje
  • Attendee Help: Lana Džidić

Topics:

  • Introduction to Vue
  • Creating Vue application using Vue CLI
  • Explaining Vue CLI and its wizard
  • Introduction to Vue UI
  • Introduction to NPM package manager, installing dependencies like lodash and axios
  • Introduction to .gitignore
  • Introduction to ESLint and basic rules
  • Explaining Vue instance and starting application
  • Explaining environment variables
  • Explaining directory structure and project organisation
  • Basics of vue.config, mentioning webpack under the hood
  • Introduction to Single File Components
  • Explaining template syntax and scss style
  • Creating several components and utility files
  • Deep diving into component options like data, computed, components and methods

Day Two

  • Start: 09:00
  • Presenter: Lana Džidić
  • Attendee Help: Ahmet Macić

Topics:

  • Introduction to component lifecycle hooks
  • Introduction to Vue application build process, explaining transpilation
  • Vue Router and lazy loading (webpack chunks)
  • Creating multiple pages and navigation
  • Axios
  • State management with Vuex
  • Explaining events and child-parent communication
  • Introduction to Vue developer console
  • Using developer console to time travel

Day Three

  • Start: 09:00
  • Presenter: Ahmet Macić
  • Attendee Help: Jadranko Dragoje

Topics:

  • Extending components
  • Using mixins with reference to composition API in v3
  • Using components slots
  • Using dynamic components
  • Using render functions
  • Unit testing with Jest
  • Recapitulation of learned

About

Example vue application used in workshops

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published