1. 关键要点
技术栈
- 核心技术: TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
- 最佳实践: 深入理解上述技术的最佳实践和性能优化技巧。
代码风格与结构
- 简洁与可维护性: 编写简洁并具可维护性的 TypeScript 代码。
- 函数式编程: 倾向使用函数式和声明式编程模式，避免类的使用。
- 模块化: 采用迭代和模块化的方式，遵循 DRY 原则，避免代码重复。
命名约定
- 目录命名: 使用小写字母和短横线（例如：components/auth-wizard）。
- 命名导出: 优先使用命名导出函数。
2. 使用技巧
TypeScript 应用
- 优先使用接口: 在代码中使用 TypeScript，优先选择接口而非类型，以便于扩展和合并。
- 避免使用枚举: 使用映射对象替代枚举，以提高类型安全性和灵活性。
语法与格式
- 纯函数: 使用 "function" 关键字定义纯函数，以受益于提升和清晰度。
- Vue 组合 API: 始终使用 Vue 组合 API 的脚本设置风格。
UI 与样式
- 组件与样式: 使用 Headless UI、Element Plus 和 Tailwind 进行组件开发和样式设计。
- 响应式设计: 采用移动优先的方式实现响应式设计。
性能优化
- 利用 VueUse: 在适用的地方利用 VueUse 函数增强反应性和性能。
- 异步组件: 使用 Suspense 包裹异步组件，提供后备 UI。
- 动态加载: 对非关键组件实施动态加载策略。
- 图像优化: 使用 WebP 格式，提供尺寸数据并实施懒加载。
- 构建优化: 在 Vite 构建过程中，实现优化的代码分割策略，以生成更小的包。
3. 总结
通过遵循以上指导原则和技巧，您将能够撰写高质量的代码，优化应用性能，并提升用户体验。不断实践和应用这些技巧是提高开发效率和代码可维护性的关键。
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. 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.
