A test package providing an approach in order to create and packetize a vue component library.
npm install @buttkus/workshop-vue-component-library#### __2.1 Vorbereiten eines neuen Vue-Projektes:__
Zunächst soll ein neues Vue-Projekt angelegt werden, das unsere zu paketierenden Komponenten beinhalten wird.
1. Öffne dazu eine Konsole (cmd, bash).
2. Erstelle ein neues Vue-Projekt mit dem Befehl: vue create my-vue-component-library.
3. Wähle das Template _Default ([Vue 2] babel, eslint)_ zur Erstellung aus.
4. Wechsle in das erstelle Verzeichnis: cd my-vue-component-library.
5. Öffne das erstellte Vue-Projekt in Visual Studio Code: code .
6. Installiere die Abhängigkeiten aus der package.json mit dem Befehl: npm install.
7. Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: npm run serve.
#### __2.2 Erstellung einer einfachen Komponente:__
Nun soll eine Vue-Komponente (SFC) erstellt werden, welche in den folgenden Schritten paketiert werden wird.
1. Erstelle eine neue Datei 3. Lege im Verzeichnis export { default as FancyTextBox } from "./components/FancyTextBox.vue"; 5. Binde die erstellte Komponente testweise in die Komponente #### __2.3 Konfiguration des Library-Builds in der package.json:__ 1. Füge in der Der Parameter #### __2.4 Bereitstellung von Paketmetainformationen in der package.json:__ - Führe folgende Anpassungen in der #### __2.5 Weitere Vorbereitungen der package.json für die Paketierung:__ "files": [ 1. Öffne eine Konsole (cmd, bash). #### __2.8 Die veröffentlichte Komponentenbibliothek in einem weiteren Projekt einbinden__ 1. Öffne eine Konsole (cmd, bash). import { FancyTextBox } from "@your-user/my-vue-component-library"; components: { ...FancyTextBox.vue im Verzeichnis .\src\components.
2. Füge Quellcode so ein, dass eine __einfache__ wiederverwendbare Vue-Komponente entsteht, die Text (z. B. auf einen basierend) per Default Slot darstellen soll. Du kannst alternativ den folgenden Quellcode in die Datei einfügen
.\src die Datei index.js an.
4. Füge folgende Zeile in die Datei .\src\index.js ein: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.
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.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.--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.
In diesem Abschnitt wird beschrieben, wie die Metainformationen des zu erstellenden Paketes zu bearbeiten sind.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.
- 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:
"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.
2. Führe das erstellte Build-Skript npm run build-library aus.npm login
3. Führe einen Login bei npm durch: . npm whoami
4. Nutze den Befehl , um die Benutzerdaten zu kontrollieren.npm publish --access public
5. Veröffentliche das gebaute Paket durch Ausführen des Befehls: .
In diesem Abschnitt wird beschrieben, wie die erstellte und veröffentlichte Vue-Komponentenbibiliothek in einem weiteren Vue-Projekt eingebunden und benutzt werden kann.
2. Erstelle ein neues Vue-Projekt mit dem Befehl: vue create my-vue-component-library-consument.cd my-vue-component-library-consument
3. Wähle das Template _Default ([Vue 2] babel, eslint)_ zur Erstellung aus.
4. Wechsle in das erstelle Verzeichnis: .code .
5. Öffne das erstellte Vue-Projekt in Visual Studio Code: npm install
6. Installiere die Abhängigkeiten: .npm run serve
7. Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: .npm install --save @your-user/my-vue-component-library
8. Installiere das zuvor bei _npm_ veröffentlichte Paket mithilfe des Befehls .FancyTextBox
9. Importiere die SFC innerhalb der HelloWorld.vue im Skriptteil per
...
FancyTextBox,
},
10. Die Komponente kann nun per $3
1. How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
2. npm Dokumentation: https://docs.npmjs.com/
3. Vue.js Dokumentation: https://vuejs.org/v2/guide/