Vue Application Structure

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

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Structure Vue 3 applications using Composition API, component organization, and TypeScript. Use when building scalable Vue applications with proper separation of concerns.

仅含说明Software Development

AI 生成的概览

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

功能: 提供使用组合式 API、TypeScript 与关注点分离来组织 Vue 3 应用的指导与参考资料。内容涵盖状态、异步数据获取与表单处理的组合式函数，以及 Pinia store 模式和组件组织方式。还附带一个组件模板文件作为起点。
适用场景: 适用于构建或重构较大型 Vue 3 应用、组件库或可复用组合式函数的场景。面向需要更清晰的文件组织、状态管理与类型安全的项目。
运行要求: 不含脚本，仅为说明与参考文档。使用其中的示例需要具备 TypeScript 与 Pinia 的 Vue 3 项目。

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:

typescript

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

// 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 [blocked]	Vue 3 Composition API Component
Async Data Fetching Composable [blocked]	Async Data Fetching Composable
Component Organization Structure [blocked]	Component Organization Structure
Form Handling Composable [blocked]	Form Handling Composable
Pinia Store (State Management) [blocked]	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

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/vue-application-structure提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Vue Application Structure

Vue Application Structure

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Visual Regression Testing

User Persona Creation

User Guide Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices