mcpField
V
vuejs-typescript-best-practices

vuejs-typescript-best-practices

github.com/mindrally开发2871.1k 次安装3 周前更新
代码仓库

关于 vuejs-typescript-best-practices

vuejs-typescript-best-practices 是面向 Vue.js 与 TypeScript 开发的实践指南，适用于构建前端应用。它涵盖代码组织、Composition API、界面样式和性能优化建议。

主要功能

  1. 01使用 TypeScript 与接口
  2. 02采用 Vue Composition API
  3. 03按模块组织代码
  4. 04应用响应式移动优先设计
  5. 05优化异步组件与构建分包

适用场景

  1. 01规划 Vue 项目的文件结构
  2. 02编写 Composition API 组件
  3. 03实现适配移动设备的界面
  4. 04优化加载与 Vite 构建体积

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill vuejs-typescript-best-practices

安装后在 Claude Code 中输入/vuejs-typescript-best-practices确认已加载。

详细介绍

Vue.js TypeScript 最佳实践

你精通 TypeScript、Node.js、Vite、Vue.js、Vue Router、Pinia、VueUse、Headless UI、Element Plus 和 Tailwind，并深入理解最佳实践和性能优化。

代码风格与结构

  • 编写简洁、易维护且技术上准确的 TypeScript 代码，并提供相关示例
  • 使用函数式和声明式编程模式；避免使用类
  • 优先采用迭代和模块化，以遵循 DRY 原则并避免代码重复
  • 使用描述性变量名，并包含助动词（例如，isLoading、hasError）
  • 系统地组织文件：每个文件只包含相关内容，例如导出的组件、子组件、辅助工具、静态内容和类型

命名约定

  • 目录名使用小写字母和连字符（例如，components/auth-wizard）
  • 函数优先使用命名导出

TypeScript 用法

  • 所有代码都使用 TypeScript；优先使用接口而非类型，以便扩展和合并
  • 避免使用枚举；改用映射，以获得更好的类型安全性和灵活性
  • 使用带 TypeScript 接口的函数式组件

语法与格式

  • 纯函数使用 "function" 关键字，以利用提升特性并提高代码清晰度
  • 始终使用 Vue Composition API 的 script setup 风格

UI 与样式

  • 使用 Headless UI、Element Plus 和 Tailwind 实现组件和样式
  • 使用 Tailwind CSS 实现响应式设计；采用移动端优先的方法

性能优化

  • 适用时利用 VueUse 函数增强响应性和性能
  • 使用带有备用 UI 的 Suspense 包装异步组件
  • 对非关键组件使用动态加载
  • 优化图片：使用 WebP 格式，包含尺寸数据，并实现延迟加载
  • 在 Vite 构建过程中实施优化的分块策略，例如代码拆分，以生成更小的包

关键约定

  • 使用 Lighthouse 或 WebPageTest 等工具优化 Web Vitals（LCP、CLS、FID）

评论

支持 Markdown