Configuración de la Directiva Word de Vue.js Programming Prompt para Cursor

Comandos de utilidad de AIActualizado hace 10 meses Círculo de intercambio de inteligencia artificial

Si usted es un principiante, que realmente quiere escribir el código completo del proyecto con un solo clic a través de AI, y automáticamente desplegar el entorno en línea para usarlo.
Recomendado:Bolt: una plataforma de desarrollo integral en tiempo real basada en inteligencia artificial que genera y ejecuta en línea el código completo del proyecto.

Esta guía está diseñada para ayudarle a desarrollar eficientemente con TypeScript, Vue.js y pilas de tecnología relacionadas. A continuación encontrarás los puntos clave y las mejores prácticas:

Visión general de la pila tecnológica
- Core: TypeScript, Node.js, Vue.js 3
- Herramienta de construcción: Vite
- Gestión de estado: Pinia
- Enrutamiento: Vue Router
- Componentes de interfaz de usuario: Headless UI, Element Plus
- Estilo: Tailwind CSS
- Biblioteca de herramientas: VueUse
Estilo y estructura del código
- Escribir código TypeScript limpio y fácil de mantener.
- Adopción de modelos de programación funcional y declarativa
- Evite las clases en favor de las funciones
- Seguir el principio DRY para evitar la duplicación de código mediante la iteración y la modularidad.
- Utilice nombres de variables descriptivos como isLoading, hasError
- Organización de los archivos: cada archivo contiene sólo el contenido pertinente (componentes, subcomponentes, funciones de ayuda, etc.)
convención de nomenclatura
- Utilice letras minúsculas con guiones para los directorios (por ejemplo, components/auth-wizard)
- Uso preferente de las exportaciones nominativas
Trucos y consejos sobre TypeScript
- Todo el código utiliza TypeScript
- Prefiera las interfaces a los tipos
- Evite los enums y utilice mapas para obtener seguridad de tipos y flexibilidad.
Gramática y formato
- Definición de funciones puras con la palabra clave function
- Utilice siempre la API de composición de Vue

Siguiendo estas directrices, podrás crear aplicaciones Vue.js que sean eficientes, mantenibles y tengan un buen rendimiento. Recuerda seguir practicando y optimizando para obtener los mejores resultados de desarrollo.

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.