Vue 3 应用结构最佳实践：Composition API、TypeScript与项目组织指南

vue-application-structure by aj-geddes/useful-ai-prompts

153 周安装量

162 GitHub Stars

GitHub

安装命令

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

Vue TypeScript 前端架构

🇨🇳中文介绍

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>
// ... (完整实现请参阅参考指南)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
Vue 3 Composition API 组件	Vue 3 Composition API Component
异步数据获取组合式函数	Async Data Fetching Composable
组件组织结构	Component Organization Structure
表单处理组合式函数	Form Handling Composable
Pinia 存储（状态管理）	Pinia Store (State Management)

🇺🇸English

Vue Application Structure

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build well-organized Vue 3 applications using Composition API, proper file organization, and TypeScript for type safety and maintainability.

When to Use

Large-scale Vue applications
Component library development
Reusable composable hooks
Complex state management
Performance optimization

Quick Start

Minimal working example:

// 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)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Vue 3 Composition API Component	Vue 3 Composition API Component
Async Data Fetching Composable	Async Data Fetching Composable
Component Organization Structure	Component Organization Structure
Form Handling Composable	Form Handling Composable
Pinia Store (State Management)	Pinia Store (State Management)

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Weekly Installs

113

Repository

aj-geddes/usefu…-prompts

GitHub Stars

121

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode91

gemini-cli89

claude-code87

codex85

cursor83

github-copilot73