커서에 대한 Vue.js 프로그래밍 프롬프트 단어 지시문 구성하기

1.5K 0

초보자라면 정말 원클릭으로 AI를 통해 완전한 프로젝트 코드를 작성하고 온라인 환경을 자동으로 배포하여 사용할 수 있기를 원합니다.
추천합니다:Bolt: 완전한 프로젝트 코드를 온라인으로 생성하고 실행하는 실시간 AI 기반 풀스택 개발 플랫폼입니다.

이 가이드는 TypeScript, Vue.js 및 관련 기술 스택으로 효율적으로 개발하는 데 도움이 되도록 설계되었습니다. 다음은 핵심 사항과 모범 사례입니다:

기술 스택 개요
- 핵심: TypeScript, Node.js, Vue.js 3
- 빌드 도구: Vite
- 상태 관리: Pinia
- 라우팅: Vue 라우터
- UI 구성 요소: 헤드리스 UI, 엘리먼트 플러스
- 스타일: 테일윈드 CSS
- 도구 라이브러리: VueUse
코드 스타일 및 구조
- 깔끔하고 유지 관리가 쉬운 타입스크립트 코드를 작성하세요.
- 기능적 및 선언적 프로그래밍 모델 채택
- 함수를 선호하는 클래스 피하기
- 반복 및 모듈화를 통해 코드 중복을 방지하려면 DRY 원칙을 따르세요.
- isLoading, hasError와 같은 설명적인 변수 이름 사용
- 파일 정리: 각 파일에는 관련 콘텐츠(컴포넌트, 하위 컴포넌트, 도우미 기능 등)만 포함됩니다.
명명 규칙
- 디렉터리에는 대시와 함께 소문자를 사용합니다(예: 구성요소/인증 마법사).
- 명명된 내보내기 기본 사용
타입스크립트 팁과 요령
- 모든 코드는 TypeScript를 사용합니다.
- 유형보다 인터페이스 선호도
- 열거형을 피하고 유형 안전성과 유연성을 위해 맵을 사용하세요.
구문 및 서식 지정
- 함수 키워드로 순수 함수 정의하기
- 항상 Vue 컴포지션 API의

이 가이드라인을 따르면 효율적이고 유지 관리가 쉬우며 성능이 우수한 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.