mcpField
V
vue-application-structure

vue-application-structure

github.com/aj-geddes开发373444 次安装34 周前更新
代码仓库

关于 vue-application-structure

用于使用 Composition API 和 TypeScript 组织 Vue 3 应用的技能，面向开发大型应用、可复用组合式函数和状态管理的开发者，并提供组织结构与可维护性指导。

主要功能

  1. 01Vue 3 Composition API 模式
  2. 02使用 TypeScript 保证类型安全
  3. 03组件组织结构指南
  4. 04可复用组合式函数示例
  5. 05Pinia 状态管理指南

适用场景

  1. 01组织大型 Vue 应用
  2. 02构建可复用组合式函数
  3. 03开发组件库
  4. 04规划复杂状态管理

安装

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

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill vue-application-structure

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
async-data-fetching-composable.md
component-organization-structure.md
form-handling-composable.md
pinia-store-state-management.md
vue-3-composition-api-component.md
templates/
component-template.tsx

详细介绍

Vue 应用结构

目录

概述

使用 Composition API、合理的文件组织方式和 TypeScript，构建结构清晰的 Vue 3 应用，提升类型安全性和可维护性。

适用场景

  • 大型 Vue 应用
  • 组件库开发
  • 可复用的组合式函数
  • 复杂的状态管理
  • 性能优化

快速开始

最简可运行示例：

// useCounter.ts (Composable)
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const doubled = computed(() => count.value * 2);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;

  return {
    count,
    doubled,
    increment,
    decrement,
    reset
  };
}

// Counter.vue
<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
Vue 3 Composition API 组件Vue 3 Composition API 组件
异步数据获取组合式函数异步数据获取组合式函数
组件组织结构组件组织结构
表单处理组合式函数表单处理组合式函数
Pinia Store（状态管理）Pinia Store（状态管理）

最佳实践

✅ 应该做
  • 遵循既定的模式和约定
  • 编写清晰、易维护的代码
  • 添加适当的文档
  • 部署前进行充分测试
❌ 不应该做
  • 跳过测试或验证
  • 忽略错误处理
  • 硬编码配置值

评论

支持 Markdown