Was macht UI nach Vue?
Konvertieren Sie Stapel von UI-Design-Screenshots in Vue 3 Composition API-Komponentencode.
Wann verwenden
- Der Benutzer stellt ein Verzeichnis mit Design-Screenshots oder Design-Export-Bildern bereit.
- Die Zielanwendung ist Vue 3.
- Der Benutzer wünscht einen ersten Entwurf von Seitenkomponenten, gemeinsamen Komponenten und Router-Verdrahtung.
- Der Benutzer gibt Vant, Element Plus oder Ant Design Vue als Komponentenbibliothek an.
Wann nicht verwenden
- Der Benutzer hat nur einen Screenshot und möchte eine maßgeschneiderte Komponente.
- Das Zielprojekt ist nicht Vue.
- Das Design erfordert detaillierte Interaktionslogik, Datenfluss oder Barrierefreiheitsprüfung.
- Die Screenshots enthalten private Kundendaten, die nicht an eine externe Modell-API gesendet werden können.
Eingaben
Verwenden Sie ein Eingabeverzeichnis, das Screenshots nach Modul und Seitenstatus gruppiert:
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
Unterstützte Verzeichnisnamen für ausgeschnittene Bilder sind assets, icons, sprites, cut, images und cut-images.
Konvertierungsmodell
- Seitengruppierung: Kombinieren Sie verwandte Screenshots zu einer Seitenkomponente, wenn sie Listen-, Detail-, Formular-, Lade- oder Leerzustände darstellen.
- UI-Bibliothekszuordnung: Ordnen Sie native visuelle Elemente nach Möglichkeit Vant-, Element Plus- oder Ant Design Vue-Komponenten zu.
- Priorität für ausgeschnittene Bilder: Bevorzugen Sie zuerst Seiten-Assets, dann Modulebene-Assets, dann global geteilte Assets.
- Komponentenextraktion: Extrahieren Sie wiederholte UI-Bereiche in gemeinsame Komponenten, wenn sie mehr als einmal vorkommen.
CLI-Verwendung
Führen Sie den Konverter mit npx aus, sodass der dokumentierte Befehl ohne Abhängigkeit von einer globalen Binärdatei funktioniert:
export DASHSCOPE_API_KEY=Ihr_Schlüssel
npx [email protected] --input ./screenshots --ui vant --output ./src
Für Desktop-UI-Bibliotheken:
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
Wenn das Paket global installiert ist, kann die ui-to-vue-Binärdatei direkt verwendet werden:
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
Optionen
| Option | Beschreibung | Standard |
|---|---|---|
--input | Design-Bildverzeichnis | ./screenshots |
--ui | UI-Bibliothek: vant, element-plus oder antd-vue | vant |
--output | Ausgabeverzeichnis | ./src |
--config | Konfigurationsdateipfad | ./.ui-to-vue.config.json |
API-Schlüsselbehandlung
Der Konverter kann DashScope-Anmeldeinformationen aus einer Konfigurationsdatei oder aus der Umgebung lesen. Bevorzugen Sie eine Umgebungsvariable in Repositories:
export DASHSCOPE_API_KEY=Ihr_Schlüssel
Wenn eine lokale Konfigurationsdatei erforderlich ist, halten Sie sie aus der Versionsverwaltung heraus:
{
"apiKey": "Ihr_DashScope_Schlüssel",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
Sicherheit und Datenschutz
- Behandeln Sie Design-Screenshots als Quellmaterial, das möglicherweise an eine externe Modell-API gesendet wird.
- Führen Sie diesen Workflow nicht ohne Erlaubnis auf privaten Kundendesigns aus.
- Fixieren Sie die Konverterversion in wiederholbaren Workflows anstelle der Verwendung von
@latest. - Überprüfen Sie generierten Vue-Code, bevor Sie ihn committen.
- Committen Sie nicht
.ui-to-vue.config.json, API-Schlüssel, generierte Geheimnisse oder Kunden-Screenshots.
Checkliste zur Ausgabeprüfung
- Seitenkomponenten wurden unter
views/oder dem gewählten Ausgabeverzeichnis generiert. - Wiederholte UI-Bereiche wurden nur in
components/extrahiert, wenn die Wiederverwendung klar ist. - Die Router-Ausgabe ist mit dem Router-Stil des Zielprojekts kompatibel.
- Generierte Komponenten verwenden die angeforderte UI-Bibliothek konsistent.
- Generierte CSS-Einheiten entsprechen der Design-Grundlinie.
- Der Code besteht den Formatter, Linter, Typprüfer und Build des Projekts.
- Platzhaltertexte, Mock-Daten und generierte Assets wurden vor dem Commit überprüft.
Fehlerbehebung
| Problem | Überprüfung |
|---|---|
401 oder Authentifizierungsfehler | Bestätigen Sie, dass DASHSCOPE_API_KEY in der Shell gesetzt ist, die den Befehl ausführt. |
command not found: ui-to-vue | Verwenden Sie das Formular npx [email protected] oder installieren Sie das Paket global. |
| Ausgeschnittene Bilder werden ignoriert | Bestätigen Sie, dass der Asset-Verzeichnisname unterstützt wird und unter der passenden Seite oder dem Modul verschachtelt ist. |
| Komponenten ignorieren die angeforderte UI-Bibliothek | Führen Sie den Befehl erneut mit einem expliziten --ui-Wert aus und überprüfen Sie die generierten Importe. |
| Generierte Layout-Maße wirken falsch | Bestätigen Sie, dass die Exportbreite des Screenshots mit der Grundlinie der Zielbibliothek übereinstimmt. |
Referenzen
- npm-Paket:
ui-to-vue-converter