Stud.IP Web Components

Mit Stud.IP Web Components können wir uns in Stud.IP auf den Weg machen und das herkömmliche jQuery-JavaScript durch Web Components ersetzen, die in Vue.js geschrieben sind.

Die Stud.IP Web Components können entwederals script-Tag direkt im HTML oder mit Hilfe von webpack eingebunden werden.

Einbinden über script-Tag

Am einfachsten geht das mit über ein CDN wie unpkg.com:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@studip/web-components"></script>

Hinweis: Es muss sichergestellt sein, dass Vue auf der HTML-Seite global verfügbar ist.

Einbinden über webpack

Dazu installiert man zunächst diese Bibliothek über npm:

npm install --save-dev @studip/web-components

Danach muss sie nur noch importiert werden:

import '@studip/web-components

Auch hier muss sichergestellt sein, dass Vue auf der HTML-Seite global verfügbar ist.

Verwendung

Sobald die Stud.IP Web Components eingebunden sind, können sie wie reguläre HTML-Tags verwendet werden.

Also zum Beispiel:

<studip-link-button href="https://www.elan-ev.de">Zum ELAN e.V.</studip-link-button>

Project setup

npm install

Compiles and minifies for production

npm run build:wc

Compiles and watches for changes

npm run watch

Start storybook

npm run storybook