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