Teilen Sie ein Vite + Vue3-Komponentenbibliotheks-Gerüsttool
Ob vue2 Family Bucket oder vue3 + vite + TypeScript, fast jeder kann Komponentenbibliotheken verwenden, aber die Entwicklung einer unabhängigen Komponentenbibliothek selbst kann nicht jeder beherrschen, da der Aufbau einer grundlegenden Entwicklungsumgebung für Komponentenbibliotheken viele Studenten abschrecken wird. . Eine Komponentenbibliothek sollte mindestens drei Aspekte umfassen:
- Entwicklung und Paketierung von Komponentenbibliotheken;
- Entwicklung und Verpackung von Komponentenbibliotheksdokumenten;
- Das Kommandozeilentool cli erstellt schnell neue Komponenten.
In den letzten Tagen hat der Programmierer Elegant Brother das Grundgerüst einer Komponentenbibliothek aufgebaut:
vue3-component-library-archetype
Auf der Grundlage dieses Gerüsts können Sie mit der integrierten CLI schnell neue Komponenten erstellen und einfach der Routine zum Entwickeln von Komponenten und Dokumenten folgen. Scaffolding vereinfacht den Umgebungsaufbau, die Verpackungskonfiguration, die Extraktion von Typdefinitionen und andere Tools erheblich. Es kann sofort verwendet werden und jeder kann sich auf die Entwicklung der Komponente selbst konzentrieren.
Das Gerüst übernimmt den Monorepo- Stil und verwendet pnpm als Paketverwaltungstool.
1 Gerüstinhalt der Komponentenbibliothek
- Entwicklung, Verpackung und Veröffentlichung von Komponentenbibliotheken
- Schreiben von Komponentenbibliotheksdokumenten, Verpacken, eine Reihe von Code-Schreib- und Demonstrationsdemos
- Erstellen Sie schnell eine Komponenten-Befehlszeilen-CLI
- Beispielhafte Demonstration des Aufbaus einer Komponentenbibliothek
Gerüsttechnologie-Stack mit 2 Komponentenbibliotheken
- Schnell 3
- Vue 3
- Typoskript
- Vitepress 1.0
- ESLint
3 Gebrauchsanweisung
3.1 Klonen Sie den Code lokal
git clone [email protected]:HeroCloudy/vue3-component-library-archetype.git
3.2 Abhängigkeiten installieren
Wenn Sie pnpm nicht installiert haben, müssen Sie zuerst pnpm befolgen
npm install -g pnpm
Abhängigkeiten installieren:
pnpm i
3.3 Lokale Entwicklung
Um beispielsweise Komponenten zu entwickeln, verwenden Sie den folgenden Befehl:
pnpm run dev:dev
Die Zugangsadresse ist http://localhost:3000/
Um Komponenten im Komponentenbibliotheksdokument zu entwickeln, verwenden Sie den folgenden Befehl:
pnpm run docs:dev
Die Zugangsadresse ist http://localhost:3100/
Die Dokumentschnittstelle der Komponentenbibliothek sieht wie folgt aus:
3.4 Neue Komponenten erstellen
pnpm run gen:component
Befolgen Sie die Anweisungen, um den Komponentennamen, den chinesischen Namen der Komponente und den Komponententyp (.tsx oder .vue) einzugeben.
Nach Ausführung des Befehls zum Erstellen einer Komponente wird die Komponente automatisch in der Komponentenbibliothek registriert und die Dokumentvorlage und Demo im Dokument werden automatisch generiert, ohne dass eine manuelle Konfiguration erforderlich ist.
3.5 Baudokumentation
pnpm run build:docs
Die gepackten und erstellten Dateien befinden sich im Verzeichnis docs/.vitepress/dist
3.6 Baubeispiel
pnpm run build:dev
Die gepackten und erstellten Dateien befinden sich im Verzeichnis dist
3.7 Komponentenbibliothek veröffentlichen
Verpackung der Komponentenbibliothek:
pnpm run build:lib
Sie können es auf einem lokalen privaten Server testen, bevor Sie es für npm freigeben.
Starten Sie den lokalen privaten Server:
pnpm run start:verdaccio
Besuchen Sie nach erfolgreichem Start http://localhost:4873/ im Browser
Wenn Sie es zum ersten Mal verwenden, müssen Sie einen Benutzer erstellen.
Veröffentlichen Sie die Komponentenbibliothek auf dem lokalen privaten Server:
pnpm run pub:local
4 Befehlsbeschreibung der Komponentenbibliothek
Die Befehlseinträge der Komponentenbibliothek befinden sich alle in den Skripten in package.json im Stammverzeichnis . Aufgrund des Monorepo-Ansatzes werden die meisten Befehle in ihren jeweiligen Modulen implementiert.
Alle Befehle lauten wie folgt:
- dev:dev
- dev:uat
- dev:prod
- build:dev
- build:uat
- build:prod
- preview:example
- build:lib
- docs:dev
- docs:build
- docs:preview
- gen:component
- start:verdaccio
- pub:local
pnpm führt dev:dev aus
Beispiel für eine lokale Entwicklung, verwenden Sie die Entwicklungsumgebungskonfiguration, die Zugriffsadresse lautet http://localhost:3000/
pnpm führt dev:uat aus
Beispiel für eine lokale Entwicklung, verwenden Sie die uat-Umgebungskonfiguration, die Zugriffsadresse lautet http://localhost:3000/
pnpm führt dev:prod aus
Beispiel für eine lokale Entwicklung, verwenden Sie die Konfiguration der Produktumgebung, die Zugriffsadresse lautet http://localhost:3000/
pnpm führt build:dev aus
Beispiel für eine Verpackungsentwicklungsumgebung: Die durch die Verpackung generierten Dateien befinden sich im dist- Verzeichnis des Projektstammverzeichnisses
pnpm führt build:uat aus
Beispiel für eine uat-Paketumgebung. Die durch das Packen generierten Dateien befinden sich im dist- Verzeichnis des Projektstammverzeichnisses.
pnpm führt build:prod aus
Beispiel für eine Paketproduktumgebung. Die durch das Packen generierten Dateien befinden sich im dist- Verzeichnis des Projektstammverzeichnisses.
pnpm-Laufvorschau: Beispiel
Um eine Vorschau des gepackten Beispiels anzuzeigen, lautet die Zugriffsadresse: http://localhost:4173/
pnpm führt build:lib aus
Verpackungskomponentenbibliothek. Die durch Verpackung generierten Dateien befinden sich im lib- Verzeichnis des Projektstammverzeichnisses
pnpm führt docs:dev aus
Dokumentation der lokalen Entwicklungskomponentenbibliothek, Zugriffsadresse: http://localhost:3100/
pnpm führt docs:build aus
Beim Packen von Komponentenbibliotheksdokumenten befinden sich die generierten Dateien im Verzeichnis docs/.vitepress/dist im Projektstammverzeichnis
pnpm führt docs:preview aus
Um eine Vorschau des gepackten Komponentenbibliotheksdokuments anzuzeigen, lautet die Zugriffsadresse: http://localhost:4173/
pnpm führt gen:component aus
Erstellen Sie schnell neue Komponenten. Geben Sie den Komponentennamen, die Komponentenbeschreibung (chinesischer Name) und den Komponententyp (tsx\vue) ein, um die Komponente automatisch zu generieren und die Konfiguration abzuschließen.
Die Verwendung dieses Befehls verhindert, dass Komponentenentwickler sich von der Erstellung verschiedener Konfigurationen, Basisverzeichnisse und Dateien ablenken, sodass sie sich auf die Entwicklung der Komponente selbst konzentrieren können.
pnpm run start:verdaccio
Beginnen Sie mit dem Verdaccio. Wenn Sie lokal entwickeln, verwenden Sie Verdaccio als lokalen privaten NPM-Server zum Testen.
Verwenden Sie diesen Befehl, um den privaten Verdaccio-Server zu starten. Besuchen Sie nach erfolgreichem Start http://localhost:4873/ im Browser.
Wenn Sie es zum ersten Mal verwenden und einen Benutzer erstellen müssen, können Sie nach „verdaccio“ suchen , um die spezifische Verwendung anzuzeigen.
pnpm führt pub:local aus
Veröffentlichen Sie die Komponentenbibliothek auf dem lokalen privaten Server.
Wenn Sie Fragen haben, kontaktieren Sie mich bitte
Die folgenden Themen teilen den Implementierungsprozess dieses Gerüsts und ermöglichen es Ihnen, dieses Gerüst Schritt für Schritt zu implementieren, JSON-Schema-Formulare, Listen und andere Komponenten basierend auf diesem Gerüst zu implementieren und im Beispiel ein allgemeines Backend-Verwaltungssystem zu entwickeln.
Vielen Dank, dass Sie diesen Artikel gelesen haben. Wenn Ihnen dieser Artikel ein wenig geholfen oder Sie inspiriert hat, unterstützen Sie ihn bitte dreimal mit „Gefällt mir“, „Folgen“ und „Sammeln“. Der Autor wird weiterhin weitere nützliche Informationen mit Ihnen teilen.