UI To Vue
Convertissez par lots des captures d'écran de design UI en code de composants Vue 3 utilisant l'API Composition.
Quand l'utiliser
- L'utilisateur fournit un répertoire de captures d'écran de design ou d'images exportées.
- L'application cible est Vue 3.
- L'utilisateur souhaite une première ébauche de composants de page, composants partagés et câblage du routeur.
- L'utilisateur spécifie Vant, Element Plus ou Ant Design Vue comme bibliothèque de composants.
Quand ne pas l'utiliser
- L'utilisateur n'a qu'une seule capture d'écran et souhaite un composant sur mesure.
- Le projet cible n'est pas Vue.
- Le design nécessite une logique d'interaction détaillée, un flux de données ou une revue d'accessibilité.
- Les captures d'écran contiennent des données client privées qui ne peuvent pas être envoyées à une API de modèle externe.
Entrées
Utilisez un répertoire d'entrée qui regroupe les captures d'écran par module et état de page :
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
Les noms de répertoires d'images découpées pris en charge incluent assets, icons, sprites, cut, images et cut-images.
Modèle de conversion
- Regroupement de pages : combinez les captures d'écran connexes en un seul composant de page lorsqu'elles représentent des états de liste, détail, formulaire, chargement ou vide.
- Mappage de bibliothèque UI : mappez les éléments visuels natifs vers les composants Vant, Element Plus ou Ant Design Vue lorsque c'est pratique.
- Priorité des images découpées : privilégiez les actifs au niveau de la page, puis au niveau du module, puis les actifs partagés globaux.
- Extraction de composants : extrayez les régions UI répétées en composants partagés lorsqu'elles apparaissent plus d'une fois.
Utilisation en ligne de commande
Exécutez le convertisseur avec npx pour que la commande documentée fonctionne sans dépendre d'un binaire global :
export DASHSCOPE_API_KEY=your_key
npx [email protected] --input ./screenshots --ui vant --output ./src
Pour les bibliothèques UI desktop :
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
Si le paquet est installé globalement, le binaire ui-to-vue peut être utilisé directement :
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
Options
| Option | Description | Défaut |
|---|---|---|
--input | Répertoire des images de design | ./screenshots |
--ui | Bibliothèque UI : vant, element-plus ou antd-vue | vant |
--output | Répertoire de sortie | ./src |
--config | Chemin du fichier de configuration | ./.ui-to-vue.config.json |
Gestion de la clé API
Le convertisseur peut lire les identifiants DashScope depuis un fichier de configuration ou depuis l'environnement. Privilégiez une variable d'environnement dans les dépôts :
export DASHSCOPE_API_KEY=your_key
Si un fichier de configuration local est nécessaire, excluez-le du contrôle de version :
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
Sécurité et confidentialité
- Considérez les captures d'écran de design comme du matériel source pouvant être envoyé à une API de modèle externe.
- N'exécutez pas ce flux sur des designs clients privés sans autorisation.
- Épinglez la version du convertisseur dans les workflows reproductibles plutôt que d'utiliser
@latest. - Révisez le code Vue généré avant de le valider.
- Ne validez pas
.ui-to-vue.config.json, les clés API, les secrets générés ou les captures d'écran client.
Liste de vérification pour la révision de la sortie
- Les composants de page ont été générés dans
views/ou le répertoire de sortie choisi. - Les régions UI répétées ont été extraites dans
components/uniquement lorsque la réutilisation est évidente. - La sortie du routeur est compatible avec le style de routeur du projet cible.
- Les composants générés utilisent la bibliothèque UI demandée de manière cohérente.
- Les unités CSS générées correspondent à la base de conception.
- Le code passe le formateur, le linter, le vérificateur de types et la construction du projet.
- Les textes de substitution, les données factices et les actifs générés ont été révisés avant la validation.
Dépannage
| Problème | Vérification |
|---|---|
401 ou erreur d'authentification | Confirmez que DASHSCOPE_API_KEY est définie dans le shell exécutant la commande. |
command not found: ui-to-vue | Utilisez la forme npx [email protected] ou installez le paquet globalement. |
| Les images découpées sont ignorées | Confirmez que le nom du répertoire d'actifs est pris en charge et imbriqué sous la page ou le module correspondant. |
| Les composants ignorent la bibliothèque UI demandée | Relancez avec une valeur --ui explicite et inspectez les importations générées. |
| Les dimensions de mise en page générées semblent erronées | Confirmez que la largeur d'exportation de la capture d'écran correspond à la base de la bibliothèque cible. |
Références
- Paquet npm :
ui-to-vue-converter