Configuration de la directive Word de l'invite de programmation Vue.js pour le curseur

Commandes d'utilitaires AIMise à jour il y a 10 mois Cercle de partage de l'IA

2.1K 00

Si vous êtes débutant, vous voulez vraiment écrire le code complet du projet en un seul clic grâce à l'IA, et déployer automatiquement l'environnement en ligne pour l'utiliser.
Recommandé :Bolt : une plateforme de développement full-stack en temps réel pilotée par l'IA qui génère et exécute en ligne le code d'un projet complet.

本指南旨在帮助您使用 TypeScript、Vue.js 及相关技术栈进行高效开发。以下是关键要点和最佳实践：

技术栈概览
- 核心：TypeScript, Node.js, Vue.js 3
- 构建工具：Vite
- 状态管理：Pinia
- 路由：Vue Router
- UI 组件：Headless UI, Element Plus
- 样式：Tailwind CSS
- 工具库：VueUse
Style et structure du code
- 编写简洁、可维护的 TypeScript 代码
- 采用函数式和声明式编程模式
- 避免使用类，倾向于使用函数
- 遵循 DRY 原则，通过迭代和模块化避免代码重复
- 使用描述性变量名，如 isLoading, hasError
- 文件组织：每个文件只包含相关内容（组件、子组件、辅助函数等）
convention d'appellation
- 目录使用小写字母加破折号（如 components/auth-wizard）
- 优先使用命名导出
TypeScript 使用技巧
- 所有代码都使用 TypeScript
- 优先使用接口（interface）而非类型（type）
- 避免使用枚举（enum），改用 map 以提高类型安全性和灵活性
Syntaxe et formatage
- 使用 function 关键字定义纯函数
- 始终使用 Vue Composition 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.