Home
Softono
vue_basics_tut

vue_basics_tut

Open source
GitHub
35
Stars
1
Forks
0
Issues
6
Watchers
8 years
Last Commit
JavaScript Libraries & Components Education & Learning

About vue_basics_tut

A tutorial project that teaches the Vue.js progressive framework along with the Vuetify component library. Developed as part of the Web Application Development course at Stuttgart Media University's Master's program in Computer Science and Media, it guides learners through building a Kanban board web application step by step. The tutorial is organized into six exercises covering the core concepts needed to create interactive single-page applications: data binding, component communication, directives for conditionals and loops, global state management with Vuex, routing, and final adjustments. Each exercise builds on the previous one, keeping tasks small and focused to promote quick comprehension of main ideas. A JSON mock server is included for testing purposes, which would later be replaced by a GoLang backend using the Gin-Gonic framework. An accompanying PDF provides deeper analytical context, including framework choice rationale and additional explanations. The finished result is a functional Kanban board

Platforms

Web Self-hosted

Links

Source Code
n
Published by
na018
Visit View Profile

README.md

View on GitHub

Vue/ Vuetify tutorial

This tutorial makes you understand the progressive framework Vue with awesome components from Vuetify

When successfully completed you are ready to create your own fascinating Web Applications

kanban board gif

If you want to try out the resulting dashboard you may directly jump to the tutorial resulting kanban board.

Contens:

The frontend web application was developed with the client-side JavaScript framework vue.js (^2.5.2). The backend will be realized with the GoLang Framework Gin-Gonic. For test occasions this tutorial is provided with a JSON mock server that will later be replaced by the GoLang backend application. In the attached PDF a closer look on both frameworks will be provided. It includes:

  • Framework choice
  • analytical aspects
  • further explanations to the exercises

The exercises are chosen wisely trying to improve the comprehension of the main concepts of the frameworks on the one side, while keeping the exercises small and clear on the other side allowing to get a quick basic understanding.

Team

Nadin-Katrin Apel, David Bochan, Alex Schübl Team photo

Professor: Prof. Dr. Fridtjof Toenniessen

Further Suggestions

(Awesome that you kept reading til down here)

Now are you ready to take the challenge? Then what keeps you still waiting? - Start with Exercise 1: data binding! Good luck