O que UI para Vue faz?
Converta em lote capturas de tela de design de UI em código de componente Vue 3 usando a Composition API.
Quando Usar
- O usuário fornece um diretório de capturas de tela de design ou imagens exportadas de design.
- A aplicação alvo é Vue 3.
- O usuário deseja uma primeira versão dos componentes de página, componentes compartilhados e a fiação do roteador.
- O usuário especifica Vant, Element Plus ou Ant Design Vue como biblioteca de componentes.
Quando Não Usar
- O usuário tem apenas uma captura de tela e deseja um componente personalizado.
- O projeto alvo não é Vue.
- O design requer lógica de interação detalhada, fluxo de dados ou revisão de acessibilidade.
- As capturas de tela contêm dados privados de clientes que não podem ser enviados para uma API de modelo externa.
Entradas
Use um diretório de entrada que agrupe as capturas de tela por módulo e estado de página:
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
Os nomes de diretório de recorte suportados incluem assets, icons, sprites, cut, images e cut-images.
Modelo de Conversão
- Agrupamento de páginas: combine capturas de tela relacionadas em um único componente de página quando representarem estados de lista, detalhe, formulário, carregamento ou vazio.
- Mapeamento da biblioteca de UI: mapeie elementos visuais nativos para componentes Vant, Element Plus ou Ant Design Vue quando prático.
- Prioridade dos recortes: prefira ativos no nível da página, depois ativos no nível do módulo e, por último, ativos globais compartilhados.
- Extração de componentes: extraia regiões de UI repetidas em componentes compartilhados quando aparecerem mais de uma vez.
Uso via CLI
Execute o conversor com npx para que o comando documentado funcione sem depender de um binário global:
export DASHSCOPE_API_KEY=sua_chave
npx [email protected] --input ./screenshots --ui vant --output ./src
Para bibliotecas de UI desktop:
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
Se o pacote estiver instalado globalmente, o binário ui-to-vue pode ser usado diretamente:
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
Opções
| Opção | Descrição | Padrão |
|---|---|---|
--input | Diretório de imagens de design | ./screenshots |
--ui | Biblioteca de UI: vant, element-plus ou antd-vue | vant |
--output | Diretório de saída | ./src |
--config | Caminho do arquivo de configuração | ./.ui-to-vue.config.json |
Manipulação da Chave de API
O conversor pode ler as credenciais do DashScope a partir de um arquivo de configuração ou do ambiente. Prefira uma variável de ambiente em repositórios:
export DASHSCOPE_API_KEY=sua_chave
Se for necessário um arquivo de configuração local, mantenha-o fora do controle de versão:
{
"apiKey": "sua_chave_dashscope",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
Segurança e Privacidade
- Trate as capturas de tela de design como material de origem que pode ser enviado a uma API de modelo externa.
- Não execute este fluxo em designs de clientes privados sem permissão.
- Fixe a versão do conversor em fluxos de trabalho repetíveis em vez de usar
@latest. - Revise o código Vue gerado antes de confirmá-lo.
- Não confirme
.ui-to-vue.config.json, chaves de API, segredos gerados ou capturas de tela de clientes.
Lista de Verificação de Revisão da Saída
- Os componentes de página foram gerados em
views/ou no diretório de saída escolhido. - Regiões de UI repetidas foram extraídas para
components/apenas quando a reutilização é clara. - A saída do roteador é compatível com o estilo de roteador do projeto alvo.
- Os componentes gerados usam a biblioteca de UI solicitada de forma consistente.
- As unidades CSS geradas correspondem à linha de base do design.
- O código passa pelo formatador, linter, verificador de tipos e build do projeto.
- Textos provisórios, dados fictícios e ativos gerados foram revisados antes da confirmação.
Solução de Problemas
| Problema | Verificação |
|---|---|
401 ou erro de autenticação | Confirme se DASHSCOPE_API_KEY está definida no shell que está executando o comando. |
command not found: ui-to-vue | Use o formato npx [email protected] ou instale o pacote globalmente. |
| Recortes de imagem são ignorados | Confirme se o nome do diretório de ativos é suportado e está aninhado sob a página ou módulo correspondente. |
| Componentes ignoram a biblioteca de UI solicitada | Execute novamente com um valor explícito de --ui e inspecione as importações geradas. |
| Dimensões do layout gerado parecem erradas | Confirme se a largura da exportação da captura de tela corresponde à linha de base da biblioteca alvo. |
Referências
- Pacote npm:
ui-to-vue-converter