1. Key points
technology stack
- core technology: TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
- best practice:: In-depth understanding of best practices and performance optimization techniques for the above technologies.
Code style and structure
- Simplicity and Maintainability: Write clean and maintainable TypeScript code.
- functional programming: Tend to use functional and declarative programming patterns, avoiding the use of classes.
- modularization: Use an iterative and modular approach, following the DRY principle to avoid code duplication.
naming convention
- Catalog naming: Use lowercase letters and short horizontal lines (e.g., components/auth-wizard).
- Named Export: Prioritize the use of named export functions.
2. Techniques of use
TypeScript applications
- Prioritize the use of interfaces: Use TypeScript in your code, prioritizing interfaces over types for ease of extension and consolidation.
- Avoid using enumerations: Use mapped objects instead of enumerations for greater type safety and flexibility.
Grammar and Formatting
- pure function (math.): Define pure functions using the "function" keyword to benefit from lifting and clarity.
- Vue Portfolio API: Always use the scripting style of the Vue Portfolio API.
UI and Styles
- Components and Styles:: Component development and styling using Headless UI, Element Plus, and Tailwind.
- responsive design: A mobile-first approach to responsive design.
performance optimization
- Utilizing VueUse: Enhance reactivity and performance with VueUse functions where applicable.
- asynchronous component: Wrap asynchronous components with Suspense to provide a fallback UI.
- dynamic loading (computing):: Implement a dynamic loading strategy for non-critical components.
- Image Optimization: Use WebP format, provide dimensional data and implement lazy loading.
- Build Optimization: Implement optimized code splitting strategies to generate smaller packages during the Vite build process.
3. Summary
By following the above guidelines and tips, you will be able to write high-quality code, optimize application performance, and enhance the user experience. Continuously practicing and applying these techniques is the key to improving development efficiency and code maintainability.
Node.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. 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.
Related articles
NET Programming Prompt Word Directive for Cursor Configuration
Configuring PyTorch Programming Prompt Word Instructions for Cursor
Configuring the Go Programming Prompt Word Directive for Cursor
Configuring the Jupyter Programming Prompt Word Directive for Cursor
Configuring the three.js Programming Prompt Word Directive for Cursor
