AI个人学习
和实操指南

为Cursor配置Node.js编程提示词指令

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.
AI轻松学

普通人的AI入门指南

帮助你以低成本、零基础学会如何利用AI工具。AI就像办公软件一样,是每个人的必备技能。 掌握AI会让你在求职中占据优势,在未来的工作和学习中事半功倍。

查看详情>
未经允许不得转载:首席AI分享圈 » 为Cursor配置Node.js编程提示词指令
分享到

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们