UI Para Vue
Converta em lote capturas de tela de design de UI em código de componentes Vue 3 usando Composition API.
Quando Usar
- O usuário fornece um diretório de capturas de tela de design ou imagens exportadas de design.
- O aplicativo alvo é Vue 3.
- O usuário deseja uma primeira versão de componentes de página, componentes compartilhados e configuração de roteador.
- O usuário especifica Vant, Element Plus ou Ant Design Vue como a 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 confidenciais 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 da página:
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
Nomes de diretório de imagens recortadas suportados: 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 de imagens recortadas: prefira ativos no nível da página, depois no nível do módulo e, em seguida, 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 da API
O conversor pode ler as credenciais do DashScope 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 um arquivo de configuração local for necessário, 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 fonte que pode ser enviado para uma API de modelo externa.
- Não execute este fluxo em designs privados de clientes 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 faça commit do
.ui-to-vue.config.json, chaves de API, segredos gerados ou capturas de tela de clientes.
Lista de Verificação para 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/somente 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.
- Texto placeholder, dados mock e ativos gerados foram revisados antes do commit.
Solução de Problemas
| Problema | Verificação |
|---|---|
401 ou erro de autenticação | Confirme se DASHSCOPE_API_KEY está definida no shell que executa o comando. |
command not found: ui-to-vue | Use o formato npx [email protected] ou instale o pacote globalmente. |
| Imagens recortadas são ignoradas | Confirme se o nome do diretório de ativos é suportado e está aninhado sob a página ou módulo correspondente. |
| Os componentes ignoram a biblioteca de UI solicitada | Execute novamente com um valor --ui explícito e inspecione os imports gerados. |
| As 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