Code Monkey home page Code Monkey logo

vue-workshop's Introduction

Vue Workshop

German presentation and workshop around Vue.js.
Direct link to the presentation here.

The presentation covers the basic concepts, compares it to other frameworks and shows the usage.
The frontend and backend folders contain a simple note list project to implement.

Prerequisites

Backend

The backend directory contains a ready to use REST-API implementation for working with notes.

The following APIs are available:

Method endpoint description
GET /api/notes Returns all available notes as an array.
GET /api/notes/{id} Returns a specific note based on the id.
POST /api/notes Creates a new note.
PUT /api/notes/{id} Updates a specific note based on the id.
DELETE /api/notes/{id} Deletes a specific note based on the id.

A note is structured like this:

{
  "content": "the content",
  "isDone": true
}

You can start the server with ./gradlew bootRun -Dserver.port=8000.
Of course, you can choose any port you like, apart from 8080, which will be used by the frontend.

Frontend

The frontend directory contains a vue skeletton with some predefined code, which should help getting started.
You will mainly work in the App.vue file. See the presentation and the comments in that file.

After installing the dependencies with running yarn, the server can be started with yarn start and is then accessible on http://localhost:8080.
It also runs lint on every code change, so be sure to have a look at that window once in a while.

The frontend-solution directory contains a possible solution to compare yours to.

vue-workshop's People

Contributors

dependabot[bot] avatar rubengees avatar

Stargazers

Marlon avatar Dennis Dierkes avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.