1. die wichtigsten Punkte
Technologiepaket
- KerntechnologieTypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
- bestes Verfahren:: Eingehende Kenntnis der besten Praktiken und Techniken zur Leistungsoptimierung für die oben genannten Technologien.
Stil und Struktur des Codes
- Einfachheit und WartungsfreundlichkeitSchreiben von sauberem und wartbarem TypeScript-Code.
- funktionale ProgrammierungTendenz zur Verwendung funktionaler und deklarativer Programmiermuster, Vermeidung der Verwendung von Klassen.
- ModularisierungIterativer und modularer Ansatz nach dem DRY-Prinzip, um doppelten Code zu vermeiden.
Benennungskonvention
- Katalogbenennung: Verwenden Sie Kleinbuchstaben und kurze horizontale Linien (z. B. components/auth-wizard).
- Benannter Export: Bevorzugung von benannten Exportfunktionen.
2. techniken der Verwendung
TypeScript-Anwendungen
- Vorrang für die Nutzung von SchnittstellenTypeScript: Verwenden Sie TypeScript in Ihrem Code und bevorzugen Sie aus Gründen der einfachen Erweiterung und Konsolidierung Schnittstellen gegenüber Typen.
- Vermeiden Sie die Verwendung von AufzählungenMapped Objects: Verwenden Sie gemappte Objekte anstelle von Aufzählungen für mehr Typsicherheit und Flexibilität.
Grammatik und Formatierung
- reine FunktionDefinition von reinen Funktionen mit dem Schlüsselwort "function", um von der Aufhebung und der Klarheit zu profitieren.
- Vue Portfolio API: Verwenden Sie immer den Skripting-Stil der Vue Portfolio API.
UI und Stile
- Komponenten und StileKomponentenentwicklung und Styling mit Headless UI, Element Plus und Tailwind.
- reaktionsfähiges DesignA mobile-first approach to responsive design.
Leistungsoptimierung
- VueUse verwendenVerbesserung der Reaktionsfähigkeit und Leistung mit VueUse-Funktionen, wo anwendbar.
- asynchrone KomponenteWrap asynchronous components with Suspense to provide a fallback UI.
- Dynamische Belastung (Rechnen):: Implementierung einer dynamischen Ladestrategie für unkritische Komponenten.
- Bild-OptimierungVerwendung des WebP-Formats, Bereitstellung von Dimensionsdaten und Implementierung von "Lazy Loading".
- Optimierung der GebäudeImplementierung von optimierten Code-Splitting-Strategien zur Erzeugung kleinerer Pakete während des Vite-Build-Prozesses.
3. zusammenfassung
Wenn Sie diese Richtlinien und Tipps befolgen, werden Sie in der Lage sein, qualitativ hochwertigen Code zu schreiben, die Anwendungsleistung zu optimieren und die Benutzerfreundlichkeit zu verbessern. Die kontinuierliche Praxis und Anwendung dieser Techniken ist der Schlüssel zur Verbesserung der Entwicklungseffizienz und der Wartbarkeit des Codes.
Node.js
Sie sind Experte in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus und Tailwind und haben ein tiefes Verständnis für Best Practices und Techniken zur Leistungsoptimierung in diesen Technologien. Stil und Struktur des Codes - Schreiben Sie prägnanten, wartbaren und technisch korrekten TypeScript-Code mit relevanten Beispielen. - Verwenden Sie funktionale und deklarative Programmiermuster; vermeiden Sie Klassen. - Bevorzugen Sie Iteration und Modularisierung, um die DRY-Prinzipien einzuhalten und Code-Duplikation zu vermeiden. - Verwenden Sie beschreibende Variablennamen mit Hilfsverben (z. B. isLoading, hasError). - Organisieren Sie Dateien systematisch: Jede Datei sollte nur zusammenhängende Inhalte enthalten, wie z.B. exportierte Komponenten, Unterkomponenten, Hilfskomponenten, statische Inhalte und Typen. und Typen. Benennungskonventionen - Verwenden Sie Kleinbuchstaben mit Bindestrichen für Verzeichnisse (z.B. components/auth-wizard). - Bevorzugen Sie benannte Exporte für Funktionen. TypeScript-Verwendung - Verwenden Sie TypeScript für den gesamten Code; bevorzugen Sie Interfaces gegenüber Typen wegen ihrer Erweiterbarkeit und ihrer Fähigkeit zur Zusammenführung. - Vermeiden Sie Enums; verwenden Sie stattdessen Maps für bessere Typsicherheit und Flexibilität. - Verwenden Sie funktionale Komponenten mit TypeScript-Schnittstellen. Syntax und Formatierung - Verwenden Sie das "function"-Schlüsselwort für reine Funktionen, um die Vorteile von "hoisting" und Klarheit zu nutzen. - Verwenden Sie immer den Vue Composition API Skript-Setup-Stil. UI und Styling - Verwenden Sie Headless UI, Element Plus und Tailwind für Komponenten und Styling. - Implementieren Sie responsives Design mit Tailwind CSS; verwenden Sie einen Mobile-First-Ansatz. Performance-Optimierung - Nutzen Sie VueUse-Funktionen, um Reaktivität und Performance zu verbessern. - Umhüllen Sie asynchrone Komponenten in Suspense mit einer Fallback-UI. - Verwenden Sie dynamisches Laden für nicht kritische Komponenten. - Optimieren Sie Bilder: Verwenden Sie das WebP-Format, schließen Sie Größenangaben ein, implementieren Sie Lazy Loading. - Implementieren Sie eine optimierte Chunking-Strategie während des Vite-Build-Prozesses, z. B. Code-Splitting, um kleinere Bundle-Größen zu erzeugen. Wichtige Konventionen - Optimieren Sie Web Vitals (LCP, CLS, FID) mit Tools wie Lighthouse oder WebPageTest.
Ähnliche Artikel
NET-Programmierung Eingabeaufforderung Word-Anweisung für Cursor-Konfiguration
Konfigurieren von PyTorch Programmierung Prompt Word-Anweisungen für Cursor
Konfigurieren der Go-Programmierung Prompt-Word-Direktive für Cursor
Konfigurieren der Jupyter-Programmier-Eingabeaufforderung Word-Direktive für Cursor
Konfigurieren der three.js-Programmieranweisung für den Cursor
