{"_id":"@buttkus/workshop-vue-component-library","_rev":"4-441c5eda61d221b2495a424b25febf98","name":"@buttkus/workshop-vue-component-library","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@buttkus/workshop-vue-component-library","author":{"name":"Matthias Buttkus"},"version":"0.1.0","license":"ISC","keywords":["vue","component library","workshop"],"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","build-library":"vue-cli-service build --target lib --name workshop-vue-component-library ./src/index.js","lint":"vue-cli-service lint"},"description":"A test package providing an approach in order to create and packetize a vue component library.","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"main":"./dist/workshop-vue-component-library.common.js","devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","vue-template-compiler":"^2.6.11"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"},"rules":{}},"browserslist":["> 1%","last 2 versions","not dead"],"gitHead":"d3e5e3ea8217749f689c3f3156d2948fb229afad","_id":"@buttkus/workshop-vue-component-library@0.1.0","_nodeVersion":"12.18.3","_npmVersion":"7.23.0","dist":{"integrity":"sha512-Gjecx3WbRAt5kK/blWWN2rwlafi+sqttm9QifXABi5KM/0hEX/1KDrrWuMfvv24tH8F2jnrM7jKU263bYTnbgg==","shasum":"f0af1e8a3a25ed95f7fd50a619f9169fd064318d","tarball":"https://registry.npmjs.org/@buttkus/workshop-vue-component-library/-/workshop-vue-component-library-0.1.0.tgz","fileCount":19,"unpackedSize":103904,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGH9UCL8Fn2TDi6SGOKPMLunvj0tkfVsPOFt2MbDL08GAiEAwdnahIA9sF64xGKwsVSvnU1CfEGVkgye8vCEXeKDYg4="}]},"_npmUser":{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"},"directories":{},"maintainers":[{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/workshop-vue-component-library_0.1.0_1632723584591_0.6805029725659704"},"_hasShrinkwrap":false},"0.1.1":{"name":"@buttkus/workshop-vue-component-library","author":{"name":"Matthias Buttkus"},"version":"0.1.1","license":"ISC","keywords":["vue","component library","workshop"],"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","build-library":"vue-cli-service build --target lib --name workshop-vue-component-library ./src/index.js","lint":"vue-cli-service lint"},"description":"A test package providing an approach in order to create and packetize a vue component library.","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"main":"./dist/workshop-vue-component-library.common.js","devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","vue-template-compiler":"^2.6.11"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"},"rules":{}},"browserslist":["> 1%","last 2 versions","not dead"],"gitHead":"d3e5e3ea8217749f689c3f3156d2948fb229afad","_id":"@buttkus/workshop-vue-component-library@0.1.1","_nodeVersion":"12.18.3","_npmVersion":"7.23.0","dist":{"integrity":"sha512-tuXGf0nPV755C+WOc5UbZdvxKBx3IosSb+37sMy5ta7+ExGsuybp/RK77yGZ3q7C/bDwhIoAeU3MBW5sg0S04Q==","shasum":"da8ce55d943259a0c639bad53823760b315d27c5","tarball":"https://registry.npmjs.org/@buttkus/workshop-vue-component-library/-/workshop-vue-component-library-0.1.1.tgz","fileCount":19,"unpackedSize":177013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBXPZy5hrN2xhFcTvArzrTGMLrKIU4p5i9I/DLzJTQ6AiEA2CvVHU1hbzC0UQJjjPdwegcdWECdz2ka81TWKciW9Fs="}]},"_npmUser":{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"},"directories":{},"maintainers":[{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/workshop-vue-component-library_0.1.1_1632809761249_0.0929098858158377"},"_hasShrinkwrap":false},"0.1.2":{"name":"@buttkus/workshop-vue-component-library","author":{"name":"Matthias Buttkus"},"version":"0.1.2","license":"ISC","keywords":["vue","component library","workshop"],"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","build-library":"vue-cli-service build --target lib --name workshop-vue-component-library ./src/index.js","lint":"vue-cli-service lint"},"description":"A test package providing an approach in order to create and packetize a vue component library.","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"main":"./dist/workshop-vue-component-library.common.js","devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^6.2.2","vue-template-compiler":"^2.6.11"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"},"rules":{}},"browserslist":["> 1%","last 2 versions","not dead"],"gitHead":"d3e5e3ea8217749f689c3f3156d2948fb229afad","_id":"@buttkus/workshop-vue-component-library@0.1.2","_nodeVersion":"12.18.3","_npmVersion":"7.23.0","dist":{"integrity":"sha512-mWYY3kZZ794tW1Rx4yV4GkF77+Sj5bA978X9B5m0KYveNFdxbQ3IXQbuyzbUXRCZC62pXuUtaSN91K0NONuTCw==","shasum":"241f501dfbe16e96ddfa4fbdeea07953af20e48b","tarball":"https://registry.npmjs.org/@buttkus/workshop-vue-component-library/-/workshop-vue-component-library-0.1.2.tgz","fileCount":19,"unpackedSize":177435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzactCRA9TVsSAnZWagAAECgQAJl+ztqRztAbso9UKYJn\nzUw6KomtxNr3ZKCIUIZKEkCe2MdyPIEw0P78xtghL0YrXmlsp9gNP0QdndQx\nRDuC2VIHRWgSanYkZCz3CQCNJvoVAp2UM8jODmzG018FkK9McMJFsuB1AKFR\nI7EsxDqnwUYCtPQYVaVhQGxjphTSaw+FUw7ilGj5VXPNRnezpMyCwW1qx4cm\nF4zT89NksYTrK232/8471w8JyFc5mAeoLWePE8si8c4Eawadut9ii97FStBN\naj990kZcHMZWZ72GgSzECctDueC+bUsalVnvsItUCznpH1OShzUC0TEjorfZ\n+EA1dhTjKrnvxHwxWodukELxXimFjImQEYPhZuFjdedbf9mwxf7Kkn45sNwn\nA246LjilUTCUcQu+P5qg2ZUKemF2/lYJoEbobPjByWcEiOdnZVSVQ9rRWzHJ\nQYjUpbih+4gjouPqTmZSJkdGZbsCwjnMW6wxiO+f0bcGKzYRr5ev41hCwTed\nwGHhU7yNMCHTPDPkJAPT2tZk4bT1szJLQdNGDqPSx/PfHnYdOv/oIMyJkTFc\nsj93bk/aGnBA17ZRvo/xjZeDKNvj4sovRNkSZlWnbBCKdTHIIYwCjTGnn4h3\nNVmWg8caM/loGZehWydvbvZcnuBE8kerHgEhbNEhvvVabrJGubAEnVwr53S6\nStdU\r\n=1fGZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbBU7dFwFosVUOznuzxsa4gD47zd7pQzF/mFPTSPVNEgIgNaPsNeQGDdl+Jo52wofV0USjdsSVReN8d3FG0cSaGaY="}]},"_npmUser":{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"},"directories":{},"maintainers":[{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/workshop-vue-component-library_0.1.2_1633071415589_0.7396497976109859"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-27T06:19:44.531Z","0.1.0":"2021-09-27T06:19:44.745Z","modified":"2022-04-04T21:10:24.443Z","0.1.1":"2021-09-28T06:16:01.421Z","0.1.2":"2021-10-01T06:56:55.766Z"},"maintainers":[{"name":"buttkus","email":"matthias.buttkus@tu-dortmund.de"}],"description":"A test package providing an approach in order to create and packetize a vue component library.","keywords":["vue","component library","workshop"],"author":{"name":"Matthias Buttkus"},"license":"ISC","readme":"# my-vue-component-library\n\n## Hands On: Eine Vue-Komponentenbibliothek erstellen, mit _npm_ paketieren und als Scoped-Package (öffentlich) per Registry bereitstellen \nDie nachfolgende Anleitung kann als ein Rezept verstanden werden, um mithilfe von _npm_ und der Vue CLI eine in Vue.js (V2) geschriebene Komponentenbibliothek zu paketieren und als Scoped-Package (User-Scoped) in der _npm_ Registry zu veröffentlichen. Außerdem wird gezeigt, wie das erstellte Paket in anderen Vue-Projekten eingebunden und die implementierten Komponenten dort benutzt werden können. Diese Anleitung informiert indes nicht über Details von _npm_ oder im Umgang mit Vue.js. Zu diesem Zweck sei auf die offiziellen Dokumentationen verwiesen [2,3].\n\n### 1. Voraussetzungen\n- Du hast Visual Studio Code installiert (https://code.visualstudio.com/).\n- Du hast Node.js installiert (https://nodejs.org/en/).\n- Du hast die Vue CLI installiert (https://cli.vuejs.org/guide/installation.html).\n- Du besitzt einen npm-Account, welcher für den Publishing-Schritt genutzt werden kann. Ein kostenloser Account kann auf der Webseite von [npm](https://www.npmjs.com/) für diesen Workshop angelegt werden.\n\n### 2. Durchführung\nDiese nachfolgenden Einzelschritte sind teilweise an den Blogpost aus [1] angelehnt.\n\n#### __2.1 Vorbereiten eines neuen Vue-Projektes:__\nZunächst soll ein neues Vue-Projekt angelegt werden, das unsere zu paketierenden Komponenten beinhalten wird.\n\n1. Öffne dazu eine Konsole (cmd, bash).\n2. Erstelle ein neues Vue-Projekt mit dem Befehl: `vue create my-vue-component-library`.\n3. Wähle das Template _Default ([Vue 2] babel, eslint)_ zur Erstellung aus.\n4. Wechsle in das erstelle Verzeichnis: `cd my-vue-component-library`.\n5. Öffne das erstellte Vue-Projekt in Visual Studio Code: `code .`\n6. Installiere die Abhängigkeiten aus der `package.json` mit dem Befehl: `npm install`.\n7. Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: `npm run serve`.\n\n#### __2.2 Erstellung einer einfachen Komponente:__\nNun soll eine Vue-Komponente (SFC) erstellt werden, welche in den folgenden Schritten paketiert werden wird.\n\n1. Erstelle eine neue Datei `FancyTextBox.vue` im Verzeichnis `.\\src\\components`.\n2. Füge Quellcode so ein, dass eine __einfache__ wiederverwendbare Vue-Komponente entsteht, die Text (z. B. auf einen `<div>` basierend) per Default Slot darstellen soll. Du kannst alternativ den folgenden Quellcode in die Datei einfügen\n\n        <template>\n            <div class=\"text-box\">\n                <slot>Your text here...</slot>\n            </div>\n        </template>\n\n        <script>\n            export default {\n                name: \"FancyTextBox\",\n            };\n        </script>\n\n        <style scoped>\n        .text-box {\n            background-color: rgba(0, 0, 255, 0.3);\n        }\n        </style>\n\n3. Lege im Verzeichnis `.\\src` die Datei `index.js` an.\n4. Füge folgende Zeile in die Datei `.\\src\\index.js` ein:\n\n        export { default as FancyTextBox } from \"./components/FancyTextBox.vue\";\n\n5. 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.\n\n#### __2.3 Konfiguration des Library-Builds in der package.json:__\nUm 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.\n\n1. 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.\n\nDer 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.\n\n#### __2.4 Bereitstellung von Paketmetainformationen in der package.json:__\nIn diesem Abschnitt wird beschrieben, wie die Metainformationen des zu erstellenden Paketes zu bearbeiten sind.\n\n- Führe folgende Anpassungen in der `package.json` durch:\n    - Vergib einen user-scoped Paketnamen zu einem _npm_-Benutzer, den Du besitzt, z. B. `\"name\": \"@your-user/my-vue-component-library\"`.\n    - Entferne die Eigenschaft `\"private\": true`.\n    - Passe die Version an, z. B. auf `\"version\": \"0.1.0\"`.\n    - Befülle die Autoreneigenschaft: `\"author\": \"Forename Surname\"`.\n    - Wähle eine freie Lizenz, z. B. `\"license\": \"ISC\"`.\n    - Füge ggf. Stichwörter über das Array `keywords` hinzu.\n    - Füge ggf. eine Beschreibung des Paketes in der Eigenschaft `description` ein.\n\n#### __2.5 Weitere Vorbereitungen der package.json für die Paketierung:__\n- Führe folgende Anpassungen in der `package.json` durch:\n    - Setze die Eigenschaft `main` auf die Common-Ausgabe des Library-Builds: `./dist/my-vue-component-library.common.js`.\n    - Setze die Eigenschaft `files`, welche die Menge der Dateien bestimmt, die ins npm-Repository hochgeladen werden, wie folgt: \n\n            \"files\": [\n            \"dist/*\",\n            \"src/*\",\n            \"public/*\",\n            \"*.json\",\n            \"*.js\"\n            ],`\n    \n#### __2.7 Die Komponentenbibliothek als Paket bei npm veröffentlichen:__\nNun soll die Komponentenbibiliothek als npm-Paket veröffentlicht werden.\n\n1. Öffne eine Konsole (cmd, bash).\n2. Führe das erstellte Build-Skript `npm run build-library` aus.\n3. Führe einen Login bei npm durch: `npm login`. \n4. Nutze den Befehl `npm whoami`, um die Benutzerdaten zu kontrollieren.\n5. Veröffentliche das gebaute Paket durch Ausführen des Befehls: `npm publish --access public`.\n\n#### __2.8 Die veröffentlichte Komponentenbibliothek in einem weiteren Projekt einbinden__\nIn diesem Abschnitt wird beschrieben, wie die erstellte und veröffentlichte Vue-Komponentenbibiliothek in einem weiteren Vue-Projekt eingebunden und benutzt werden kann.\n\n1. Öffne eine Konsole (cmd, bash).\n2. Erstelle ein neues Vue-Projekt mit dem Befehl: `vue create my-vue-component-library-consument`.\n3. Wähle das Template _Default ([Vue 2] babel, eslint)_ zur Erstellung aus.\n4. Wechsle in das erstelle Verzeichnis: `cd my-vue-component-library-consument`.\n5. Öffne das erstellte Vue-Projekt in Visual Studio Code: `code .`\n6. Installiere die Abhängigkeiten: `npm install`.\n7. Vergewissere Dich, dass das Projekt gebaut und per Dev-Server ausgeliefert werden kann: `npm run serve`.\n8. Installiere das zuvor bei _npm_ veröffentlichte Paket mithilfe des Befehls `npm install --save @your-user/my-vue-component-library`.\n9. Importiere die SFC `FancyTextBox` innerhalb der `HelloWorld.vue` im Skriptteil per\n\n        import { FancyTextBox } from \"@your-user/my-vue-component-library\";\n        \n        ...\n\n        components: {\n            FancyTextBox,\n        },\n\n        ...\n10. Die Komponente kann nun per `<fancy-text-box>...</fancy-text-box>` genutzt werden.\n\n### 3. Literatur\n1. 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\n2. npm Dokumentation: https://docs.npmjs.com/\n3. Vue.js Dokumentation: https://vuejs.org/v2/guide/\n","readmeFilename":"README.md"}