1. pontos-chave
pilha de tecnologia
- tecnologia principalTypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
- melhores práticasConhecimento profundo das práticas recomendadas e das técnicas de otimização de desempenho para as tecnologias acima.
Estilo e estrutura do código
- Simplicidade e capacidade de manutençãoEscreva código TypeScript limpo e de fácil manutenção.
- programação funcionalTendência a usar padrões de programação funcionais e declarativos, evitando o uso de classes.
- modularizaçãoUse uma abordagem iterativa e modular, seguindo o princípio DRY para evitar a duplicação de código.
convenção de nomenclatura
- Nomeação do catálogoUse letras minúsculas e linhas horizontais curtas (por exemplo, components/auth-wizard).
- Exportação nomeadaFunção de exportação: Dê preferência a funções de exportação nomeadas.
2. técnicas de uso
Aplicativos TypeScript
- Priorizar o uso de interfacesUse TypeScript em seu código, preferindo interfaces a tipos para facilitar a extensão e a consolidação.
- Evite usar enumeraçõesUse objetos mapeados em vez de enumerações para maior segurança e flexibilidade de tipos.
Gramática e formatação
- função puraDefinição de funções puras: defina funções puras usando a palavra-chave "function" para se beneficiar da elevação e da clareza.
- API de portfólio do VueSempre use o estilo de script da API de portfólio do Vue.
IU e estilos
- Componentes e estilosDesenvolvimento de componentes e estilo usando Headless UI, Element Plus e Tailwind.
- design responsivoDesign responsivo: uma abordagem de design responsivo que prioriza os dispositivos móveis.
otimização do desempenho
- Usando o VueUseMelhorar a capacidade de resposta e o desempenho com as funções VueUse, quando aplicável.
- componente assíncronoEnvolvimento de componentes assíncronos com Suspense para fornecer uma interface de usuário alternativa.
- carregamento dinâmico (computação)Implementar uma estratégia de carregamento dinâmico para componentes não críticos.
- Otimização de imagensUso do formato WebP, fornecimento de dados dimensionais e implementação de carregamento lento.
- Otimização de construçãoImplementar estratégias otimizadas de divisão de código para gerar pacotes menores durante o processo de compilação do Vite.
3. resumo
Seguindo essas diretrizes e dicas, você poderá escrever códigos de alta qualidade, otimizar o desempenho do aplicativo e aprimorar a experiência do usuário. A prática e a aplicação contínuas dessas técnicas são a chave para melhorar a eficiência do desenvolvimento e a capacidade de manutenção do código.
Node.js
Você é um especialista em TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus e Tailwind, com um profundo conhecimento das práticas recomendadas e técnicas de otimização de desempenho nessas tecnologias. Estilo e estrutura de código - Escrever código TypeScript conciso, de fácil manutenção e tecnicamente preciso com exemplos relevantes. - Use padrões de programação funcionais e declarativos; evite classes. - Favorecer a iteração e a modularização para aderir aos princípios DRY e evitar a duplicação de código. - Use nomes descritivos de variáveis com verbos auxiliares (por exemplo, isLoading, hasError). - Organize os arquivos de forma sistemática: cada arquivo deve conter apenas conteúdo relacionado, como componentes exportados, subcomponentes, auxiliares, conteúdo estático e tipos. e tipos. Convenções de nomenclatura - Use letras minúsculas com traços para diretórios (por exemplo, components/auth-wizard). - Dê preferência a exportações nomeadas para funções. Uso do TypeScript - Use o TypeScript em todo o código; prefira interfaces em vez de tipos por sua capacidade de extensão e de fusão. - Evite enums; em vez disso, use mapas para maior segurança e flexibilidade de tipos. - Use componentes funcionais com interfaces TypeScript. Sintaxe e formatação - Use a palavra-chave "function" para funções puras, a fim de se beneficiar da elevação e da clareza. - Sempre use o estilo de configuração de script da API de composição do Vue. IU e estilo - Use Headless UI, Element Plus e Tailwind para componentes e estilo. - Implemente um design responsivo com o Tailwind CSS; use uma abordagem que priorize os dispositivos móveis. Otimização do desempenho - Aproveite as funções VueUse quando aplicável para aprimorar a reatividade e o desempenho. - Envolva componentes assíncronos no Suspense com uma IU de fallback. - Use o carregamento dinâmico para componentes não críticos. - Otimize as imagens: use o formato WebP, inclua dados de tamanho, implemente o carregamento lento. - Implemente uma estratégia de fragmentação otimizada durante o processo de compilação do Vite, como a divisão de código, para gerar pacotes de tamanho menor. Principais convenções - Otimize Web Vitals (LCP, CLS, FID) usando ferramentas como Lighthouse ou WebPageTest.
Artigos relacionados
Diretiva do Word do prompt de programação NET para configuração do cursor
Configuração do prompt de programação do PyTorch Instruções do Word para o cursor
Configuração da Diretiva do Word do Prompt de Programação Go para o Cursor
Configuração da diretiva do Word do prompt de programação do Jupyter para o cursor
Configuração da diretiva de palavras do prompt de programação do three.js para o cursor
