mcpField
V
vue-typescript

vue-typescript

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

关于 vue-typescript

面向 TypeScript 和 Vue.js 项目的编码技能，为开发者提供可维护代码、组件模式与性能实践指导，涵盖 Vite、Vue Router、Pinia、VueUse、Headless UI、Element Plus 和 Tailwind。

主要功能

  1. 01TypeScript 编码规范
  2. 02Vue Composition API 与 script setup
  3. 03组件和文件组织
  4. 04Tailwind 响应式样式
  5. 05性能与 Web Vitals 指导

适用场景

  1. 01组织 Vue.js 应用结构
  2. 02编写类型化 Vue 组件
  3. 03改善加载与渲染性能

安装

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

$npx skills add https://github.com/mindrally/skills --skill vue-typescript

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

详细介绍

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 构建过程中实施优化的代码拆分

Web Vitals

使用 Lighthouse 或 WebPageTest 工具优化 LCP、CLS 和 FID。

评论

支持 Markdown