ui-to-vue

UI zu Vue

Konvertieren Sie UI-Design-Screenshots in Batch in Vue 3 Composition-API-Komponentencode.

Verwendung

• 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, gemeinsam genutzten Komponenten und Router-Verkabelung.
• Der Benutzer gibt Vant, Element Plus oder Ant Design Vue als Komponentenbibliothek an.

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 ausgeschnittener Bilder: Bevorzugen Sie Assets auf Seitenebene, dann auf Modulebene, dann global freigegebene Assets.
• Komponentenextraktion: Extrahieren Sie wiederholte UI-Bereiche in gemeinsam genutzte Komponenten, wenn sie mehr als einmal vorkommen.

CLI-Verwendung

Führen Sie den Konverter mit npx aus, damit der dokumentierte Befehl ohne Abhängigkeit von einer globalen Binärdatei funktioniert:

export DASHSCOPE_API_KEY=your_key
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 Binärdatei ui-to-vue 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üssel-Handhabung

Der Konverter kann DashScope-Anmeldeinformationen aus einer Konfigurationsdatei oder aus der Umgebung lesen. Bevorzugen Sie eine Umgebungsvariable in Repositories:

export DASHSCOPE_API_KEY=your_key

Wenn eine lokale Konfigurationsdatei erforderlich ist, halten Sie sie aus der Versionskontrolle heraus:

{
  "apiKey": "your_dashscope_key",
  "input": "./designs",
  "ui": "vant",
  "output": "./src"
}

.ui-to-vue.config.json

Sicherheit und Datenschutz

• Behandeln Sie Design-Screenshots als Quellmaterial, das an eine externe Modell-API gesendet werden kann.
• Führen Sie diesen Workflow nicht ohne Genehmigung für private Kundendesigns aus.
• Fixieren Sie die Konverterversion in wiederholbaren Workflows anstatt @latest zu verwenden.
• Überprüfen Sie generierten Vue-Code, bevor Sie ihn committen.
• Committen Sie nicht .ui-to-vue.config.json, API-Schlüssel, generierte Geheimnisse oder Kundenscreenshots.

Checkliste zur Ausgabeprüfung

• Seitenkomponenten wurden unter views/ oder im 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 durchgängig die angeforderte UI-Bibliothek.
• Generierte CSS-Einheiten entsprechen der Design-Baseline.
• Der Code besteht die Formatierung, Linting, Typprüfung und den 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 die Form 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 entsprechenden Seite oder dem Modul verschachtelt ist.
Komponenten ignorieren die angeforderte UI-Bibliothek	Führen Sie den Befehl mit einem expliziten --ui-Wert erneut aus und überprüfen Sie die generierten Importe.
Generierte Layout-Dimensionen sehen falsch aus	Bestätigen Sie, dass die Exportbreite des Screenshots mit der Baseline der Zielbibliothek übereinstimmt.

Referenzen

• npm-Paket: ui-to-vue-converter