Que fait UI vers Vue ?
Convertir par lots des captures d'écran de designs UI en code de composants Vue 3 utilisant l'API Composition.
Quand l'utiliser
- L'utilisateur fournit un répertoire de captures d'écran ou d'images exportées de design.
- L'application cible est Vue 3.
- L'utilisateur souhaite une première ébauche de composants de page, composants partagés et câblage de routeur.
- L'utilisateur précise 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 clients privées qui ne peuvent pas être envoyées à une API de modèle externe.
Entrées
Utiliser 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 : combiner 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 à la bibliothèque UI : mapper les éléments visuels natifs aux composants Vant, Element Plus ou Ant Design Vue lorsque c'est pertinent.
- Priorité des images découpées : privilégier les assets au niveau de la page, puis au niveau du module, puis les assets globaux partagés.
- Extraction de composants : extraire 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écuter 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 | Valeur par 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 à partir d'un fichier de configuration ou de l'environnement. Préférez une variable d'environnement dans les dépôts :
export DASHSCOPE_API_KEY=your_key
Si un fichier de configuration local est requis, gardez-le hors 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. - Passez en revue 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 clients.
Liste de vérification de la sortie
- Les composants de page ont été générés sous
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 claire. - 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 design.
- Le code passe le formateur, le linter, le vérificateur de types et la construction du projet.
- Les textes de remplacement, les données simulées et les assets générés ont été vérifiés avant validation.
Dépannage
| Problème | Vérification |
|---|---|
Erreur 401 ou 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'assets 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 imports générés. |
| 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