3. Lege im Verzeichnis .\src die Datei index.js an.
4. Füge folgende Zeile in die Datei .\src\index.js ein:

export { default as FancyTextBox } from "./components/FancyTextBox.vue";

5. Binde die erstellte Komponente testweise in die Komponente HelloWorld.vue ein, um sicherzustellen, dass die Komponente Deinen Vorstellungen entspricht. Dies sollte per Import aus der Datei index.js geschehen, da diese Datei den Einstiegspunkt in unser zu erstellendes _npm_-Paket darstellt und wir sichergehen möchten, dass der Import funktioniert.

#### __2.3 Konfiguration des Library-Builds in der package.json:__
Um die bis hierhin erstellten Komponenten als wiederverwendbare Library zu bauen, ist es möglich, die Vue CLI zu diesem Zwecke mit einem bestimmten _Build Target_ zu benutzen. Dies soll folgend beschrieben werden.

1. Füge in der package.json innerhalb der Eigenschaft scripts das Schlüssel-Wert-Paar "build-library": "vue-cli-service build --target lib --name my-vue-component-library ./src/index.js" hinzu.

Der Parameter --target lib steuert dabei, dass es sich um einen Library-Build handelt. Wie sich dieser von dem Standard-Build unterscheidet, könnt ihr in der offiziellen Dokumentation der Vue CLI nachvollziehen. Der Parameter --name my-vue-component-library vergibt einen Namen für die zu bauenden JavaScript-Module. Mit dem letzten Parameter ./src/index.js wird der Eintrittspunkt in die Komponentenbibiliothek bestimmt.

#### __2.4 Bereitstellung von Paketmetainformationen in der package.json:__
In diesem Abschnitt wird beschrieben, wie die Metainformationen des zu erstellenden Paketes zu bearbeiten sind.

- Führe folgende Anpassungen in der package.json durch:
- Vergib einen user-scoped Paketnamen zu einem _npm_-Benutzer, den Du besitzt, z. B. "name": "@your-user/my-vue-component-library".
- Entferne die Eigenschaft "private": true.
- Passe die Version an, z. B. auf "version": "0.1.0".
- Befülle die Autoreneigenschaft: "author": "Forename Surname".
- Wähle eine freie Lizenz, z. B. "license": "ISC".
- Füge ggf. Stichwörter über das Array keywords hinzu.
- Füge ggf. eine Beschreibung des Paketes in der Eigenschaft description ein.

#### __2.5 Weitere Vorbereitungen der package.json für die Paketierung:__
- Führe folgende Anpassungen in der package.json durch:
- Setze die Eigenschaft main auf die Common-Ausgabe des Library-Builds: ./dist/my-vue-component-library.common.js.
- Setze die Eigenschaft files, welche die Menge der Dateien bestimmt, die ins npm-Repository hochgeladen werden, wie folgt:

"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],

#### __2.7 Die Komponentenbibliothek als Paket bei npm veröffentlichen:__
Nun soll die Komponentenbibiliothek als npm-Paket veröffentlicht werden.

1. Öffne eine Konsole (cmd, bash).
2. Führe das erstellte Build-Skript npm run build-library aus.
3. Führe einen Login bei npm durch: npm login.
4. Nutze den Befehl npm whoami, um die Benutzerdaten zu kontrollieren.
5. Veröffentliche das gebaute Paket durch Ausführen des Befehls: npm publish --access public.

#### __2.8 Die veröffentlichte Komponentenbibliothek in einem weiteren Projekt einbinden__
In diesem Abschnitt wird beschrieben, wie die erstellte und veröffentlichte Vue-Komponentenbibiliothek in einem weiteren Vue-Projekt eingebunden und benutzt werden kann.

1. Öffne eine Konsole (cmd, bash).
2. Erstelle ein neues Vue-Projekt mit dem Befehl: vue create my-vue-component-library-consument.
3. Wähle das Template _Default ([Vue 2] babel, eslint)_ zur Erstellung aus.
4. Wechsle in das erstelle Verzeichnis: cd my-vue-component-library-consument.
5. Öffne das erstellte Vue-Projekt in Visual Studio Code: code .
6. Installiere die Abhängigkeiten: npm install.
7. Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: npm run serve.
8. Installiere das zuvor bei _npm_ veröffentlichte Paket mithilfe des Befehls npm install --save @your-user/my-vue-component-library.
9. Importiere die SFC FancyTextBox innerhalb der HelloWorld.vue im Skriptteil per

import { FancyTextBox } from "@your-user/my-vue-component-library";

...

components: {
FancyTextBox,
},

...
10. Die Komponente kann nun per ...` genutzt werden.

$3