Настройка директивы Vue.js Programming Prompt Word для курсора

Утилитарные команды искусственного интеллектаОбновлено 10 месяцев назад Круг обмена ИИ

8.3K 00

Если вы новичок, то хотите действительно написать полный код проекта одним щелчком мыши с помощью AI и автоматически развернуть онлайн-среду для его использования.
Рекомендуем:Bolt: управляемая искусственным интеллектом платформа для полнофункциональной разработки в режиме реального времени, которая генерирует и выполняет полный код проекта в режиме онлайн

Это руководство призвано помочь вам эффективно разрабатывать с помощью TypeScript, Vue.js и связанных с ними технологических стеков. Ниже приведены основные выводы и лучшие практики:

Обзор технологического стека
- Ядро: TypeScript, Node.js, Vue.js 3
- Строительный инструмент: Vite
- Управление статусом: Пиния
- Маршрутизация: Vue Router
- Компоненты пользовательского интерфейса: Headless UI, Element Plus
- Стиль: Tailwind CSS
- Библиотека инструментов: VueUse
Стиль и структура кода
- Пишите чистый, удобный для сопровождения код на TypeScript.
- Принятие функциональных и декларативных моделей программирования
- Откажитесь от классов в пользу функций
- Следуйте принципу DRY, чтобы избежать дублирования кода за счет итераций и модульности.
- Используйте описательные имена переменных, такие как isLoading, hasError
- Организация файлов: каждый файл содержит только релевантное содержимое (компоненты, подкомпоненты, вспомогательные функции и т.д.)
соглашение об именовании
- Используйте строчные буквы с тире для каталогов (например, components/auth-wizard).
- Предпочтительное использование именованного экспорта
Советы и рекомендации по TypeScript
- Весь код использует TypeScript
- Предпочтение интерфейсов перед типами
- Избегайте перечислений и используйте карты для обеспечения безопасности типов и гибкости.
Синтаксис и форматирование
- Определение чистых функций с помощью ключевого слова function
- Всегда используйте API композиции Vue

Следуя этим рекомендациям, вы сможете создавать приложения Vue.js, которые будут эффективными, поддерживаемыми и хорошо работающими. Не забывайте продолжать практиковаться и оптимизировать для достижения наилучших результатов.

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.

Утилитарные команды искусственного интеллекта Код #