Se você for um iniciante, deseja realmente obter um clique para escrever o código completo do projeto por meio de IA e implantar automaticamente o ambiente on-line para uso.
Este guia foi criado para ajudá-lo a desenvolver com eficiência com TypeScript, Vue.js e pilhas de tecnologias relacionadas. Abaixo estão as principais conclusões e práticas recomendadas:
- Visão geral da pilha de tecnologia
- Núcleo: TypeScript, Node.js, Vue.js 3
- Ferramenta de construção: Vite
- Gerenciamento de status: Pinia
- Roteamento: Vue Router
- Componentes da interface do usuário: interface do usuário sem cabeça, Element Plus
- Estilo: Tailwind CSS
- Biblioteca de ferramentas: VueUse
- Estilo e estrutura do código
- Escreva código TypeScript limpo e de fácil manutenção.
- Adoção de modelos de programação funcionais e declarativos
- Evitar classes em favor de funções
- Siga o princípio DRY para evitar a duplicação de código por meio de iteração e modularidade
- Use nomes descritivos de variáveis, como isLoading, hasError
- Organização de arquivos: cada arquivo contém apenas o conteúdo relevante (componentes, subcomponentes, funções auxiliares, etc.)
- convenção de nomenclatura
- Use letras minúsculas com traços para diretórios (por exemplo, components/auth-wizard)
- Uso preferencial de exportações nomeadas
- Dicas e truques de TypeScript
- Todo o código usa TypeScript
- Prefira interfaces a tipos
- Evite enums e use mapas para obter segurança e flexibilidade de tipos.
- Sintaxe e formatação
- Definição de funções puras com a palavra-chave function
- Sempre use a API de composição do Vue
Seguindo essas diretrizes, você poderá criar aplicativos Vue.js que sejam eficientes, passíveis de manutenção e com bom desempenho. Lembre-se de continuar praticando e otimizando para obter os melhores resultados de desenvolvimento.
Vue.js
You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies. Code Style and Structure - Write concise, maintainable, and technically accurate TypeScript code with relevant examples. - Use functional and declarative programming patterns; avoid classes. - Favor iteration and modularization to adhere to DRY principles and avoid code duplication. - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types. Naming Conventions - Use lowercase with dashes for directories (e.g., components/auth-wizard). - Favor named exports for functions. TypeScript Usage - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge. - Avoid enums; use maps instead for better type safety and flexibility. - Use functional components with TypeScript interfaces. Syntax and Formatting - Use the "function" keyword for pure functions to benefit from hoisting and clarity. - Always use the Vue Composition API script setup style. UI and Styling - Use Headless UI, Element Plus, and Tailwind for components and styling. - Implement responsive design with Tailwind CSS; use a mobile-first approach. Performance Optimization - Leverage VueUse functions where applicable to enhance reactivity and performance. - Wrap asynchronous components in Suspense with a fallback UI. - Use dynamic loading for non-critical components. - Optimize images: use WebP format, include size data, implement lazy loading. - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes. Key Conventions - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.
Português do Brasil 
简体中文 
English 
日本語 
Deutsch