初始化

2026-03-05 21:27:11 +08:00
commit 130de0fd5d
140 changed files with 21972 additions and 0 deletions
--- a/.cursor/skills/component-scaffold/references/vue-api-reference.md
+++ b/.cursor/skills/component-scaffold/references/vue-api-reference.md
@@ -0,0 +1,481 @@
+# Vue.ts 3 API Reference
+
+Quick reference with links to official Vue.ts documentation.
+
+## Official Documentation
+
+**Main Site:** https://vuejs.org
+
+## Table of Contents
+
+1. [Getting Started](#getting-started)
+2. [Essentials](#essentials)
+3. [Components In-Depth](#components-in-depth)
+4. [Reusability](#reusability)
+5. [Built-in Components](#built-in-components)
+6. [API Reference](#api-reference)
+7. [TypeScript Patterns](#typescript-patterns)
+
+---
+
+## Getting Started
+
+### Introduction
+**URL:** https://vuejs.org/guide/introduction.html
+- What is Vue?
+- Progressive Framework
+- Single-File Components
+- API Styles (Options vs Composition)
+- Which to choose?
+
+### Quick Start
+**URL:** https://vuejs.org/guide/quick-start.html
+- Creating a Vue Application
+- Using Vue from CDN
+- With build tools (Vite)
+- IDE Setup
+
+### Creating an Application
+**URL:** https://vuejs.org/guide/essentials/application.html
+- Application instance
+- Root component
+- Mounting the app
+- App configurations
+
+---
+
+## Essentials
+
+### Template Syntax
+**URL:** https://vuejs.org/guide/essentials/template-syntax.html
+- Text interpolation
+- Raw HTML (v-html)
+- Attribute bindings (v-bind)
+- TypeScript expressions
+- Directives
+
+### Reactivity Fundamentals
+**URL:** https://vuejs.org/guide/essentials/reactivity-fundamentals.html
+- `ref()` - Reactive state for primitives
+- `reactive()` - Reactive objects
+- Reactive proxy vs original
+- `nextTick()` - DOM update timing
+
+### Computed Properties
+**URL:** https://vuejs.org/guide/essentials/computed.html
+- Basic usage
+- Computed caching vs methods
+- Writable computed
+- Best practices
+
+### Class and Style Bindings
+**URL:** https://vuejs.org/guide/essentials/class-and-style.html
+- Binding HTML classes
+- Binding inline styles
+- Object syntax
+- Array syntax
+
+### Conditional Rendering
+**URL:** https://vuejs.org/guide/essentials/conditional.html
+- `v-if`, `v-else-if`, `v-else`
+- `v-show`
+- v-if vs v-show
+- v-if with v-for
+
+### List Rendering
+**URL:** https://vuejs.org/guide/essentials/list.html
+- `v-for` with arrays
+- `v-for` with objects
+- `v-for` with ranges
+- Maintaining state with `key`
+- Array change detection
+
+### Event Handling
+**URL:** https://vuejs.org/guide/essentials/event-handling.html
+- Listening to events (`v-on` / `@`)
+- Method handlers
+- Inline handlers
+- Event modifiers (.stop, .prevent, etc.)
+- Key modifiers
+
+### Form Input Bindings
+**URL:** https://vuejs.org/guide/essentials/forms.html
+- `v-model` basics
+- Text, textarea inputs
+- Checkboxes, radio buttons
+- Select dropdowns
+- Modifiers (.lazy, .number, .trim)
+
+### Lifecycle Hooks
+**URL:** https://vuejs.org/guide/essentials/lifecycle.html
+- Lifecycle diagram
+- `onMounted()`, `onUpdated()`, `onUnmounted()`
+- `onBeforeMount()`, `onBeforeUpdate()`, `onBeforeUnmount()`
+- `onErrorCaptured()`, `onActivated()`, `onDeactivated()`
+
+### Watchers
+**URL:** https://vuejs.org/guide/essentials/watchers.html
+- `watch()` - Watch specific sources
+- `watchEffect()` - Auto-track dependencies
+- Deep watchers
+- Eager watchers (immediate)
+- Callback flush timing
+- Stopping watchers
+
+### Template Refs
+**URL:** https://vuejs.org/guide/essentials/template-refs.html
+- Accessing DOM elements
+- Refs inside v-for
+- Function refs
+- Component refs
+
+### Components Basics
+**URL:** https://vuejs.org/guide/essentials/component-basics.html
+- Defining components
+- Using components
+- Passing props
+- Listening to events
+- Slots
+
+---
+
+## Components In-Depth
+
+### Registration
+**URL:** https://vuejs.org/guide/components/registration.html
+- Global registration
+- Local registration
+- Component name casing
+
+### Props
+**URL:** https://vuejs.org/guide/components/props.html
+- Props declaration
+- Prop types and validation
+- Prop passing details
+- One-way data flow
+- Boolean casting
+- Prop validation
+
+### Events
+**URL:** https://vuejs.org/guide/components/events.html
+- Emitting and listening to events
+- Event arguments
+- Declaring emitted events
+- Events validation
+- Usage with v-model
+
+### Component v-model
+**URL:** https://vuejs.org/guide/components/v-model.html
+- Basic usage
+- v-model arguments
+- Multiple v-model bindings
+- Custom modifiers
+
+### Fallthrough Attributes
+**URL:** https://vuejs.org/guide/components/attrs.html
+- Attribute inheritance
+- Disabling inheritance
+- Accessing fallthrough attributes
+- Multi-root nodes
+
+### Slots
+**URL:** https://vuejs.org/guide/components/slots.html
+- Default slot content
+- Named slots
+- Scoped slots
+- Renderless components
+
+### Provide / Inject
+**URL:** https://vuejs.org/guide/components/provide-inject.html
+- Basic usage
+- App-level provide
+- Working with reactivity
+- Working with Symbol keys
+
+### Async Components
+**URL:** https://vuejs.org/guide/components/async.html
+- Basic usage
+- Loading and error states
+- Using with Suspense
+
+---
+
+## Reusability
+
+### Composables
+**URL:** https://vuejs.org/guide/reusability/composables.html
+- What is a composable?
+- Mouse tracker example
+- Async state example
+- Conventions and best practices
+- Usage restrictions
+- Extracting composables
+
+### Custom Directives
+**URL:** https://vuejs.org/guide/reusability/custom-directives.html
+- Introduction
+- Directive hooks
+- Hook arguments
+- Function shorthand
+- Object literals
+- Usage on components
+
+### Plugins
+**URL:** https://vuejs.org/guide/reusability/plugins.html
+- Introduction
+- Writing a plugin
+- Plugin options
+- Provide / inject with plugins
+
+---
+
+## Built-in Components
+
+### Transition
+**URL:** https://vuejs.org/guide/built-ins/transition.html
+- Basic usage
+- CSS-based transitions
+- TypeScript hooks
+- Reusable transitions
+- Appear on initial render
+- Transition between elements
+- Transition modes
+
+### TransitionGroup
+**URL:** https://vuejs.org/guide/built-ins/transition-group.html
+- Basic usage
+- Move transitions
+- Staggering list transitions
+
+### KeepAlive
+**URL:** https://vuejs.org/guide/built-ins/keep-alive.html
+- Basic usage
+- Include / exclude
+- Max cached instances
+- Lifecycle of cached instance
+
+### Teleport
+**URL:** https://vuejs.org/guide/built-ins/teleport.html
+- Basic usage
+- Using with components
+- Multiple teleports on same target
+- Disabling teleport
+
+### Suspense
+**URL:** https://vuejs.org/guide/built-ins/suspense.html
+- Async dependencies
+- Loading state
+- Error handling
+- Combining with Transitions
+- **Note:** Experimental feature
+
+---
+
+## API Reference
+
+### Global API
+**URL:** https://vuejs.org/api/application.html
+- Application API
+- General API
+
+### Composition API - Setup
+**URL:** https://vuejs.org/api/composition-api-setup.html
+- `setup()` function
+- `<script setup>` syntax
+
+### Composition API - Reactivity Core
+**URL:** https://vuejs.org/api/reactivity-core.html
+- `ref()`, `computed()`, `reactive()`, `readonly()`
+- `watchEffect()`, `watchPostEffect()`, `watchSyncEffect()`
+- `watch()`
+- `isRef()`, `unref()`, `toRef()`, `toRefs()`, `toValue()`
+- `isProxy()`, `isReactive()`, `isReadonly()`
+
+### Composition API - Reactivity Utilities
+**URL:** https://vuejs.org/api/reactivity-utilities.html
+- `isRef()`, `unref()`, `toRef()`, `toRefs()`, `toValue()`
+- `isProxy()`, `isReactive()`, `isReadonly()`
+- `shallowRef()`, `triggerRef()`, `customRef()`
+- `shallowReactive()`, `shallowReadonly()`
+
+### Composition API - Reactivity Advanced
+**URL:** https://vuejs.org/api/reactivity-advanced.html
+- `shallowRef()`, `triggerRef()`, `customRef()`
+- `shallowReactive()`, `shallowReadonly()`
+- `toRaw()`, `markRaw()`
+- `effectScope()`, `getCurrentScope()`, `onScopeDispose()`
+
+### Composition API - Lifecycle Hooks
+**URL:** https://vuejs.org/api/composition-api-lifecycle.html
+- `onMounted()`, `onUpdated()`, `onUnmounted()`
+- `onBeforeMount()`, `onBeforeUpdate()`, `onBeforeUnmount()`
+- `onErrorCaptured()`, `onRenderTracked()`, `onRenderTriggered()`
+- `onActivated()`, `onDeactivated()`, `onServerPrefetch()`
+
+### Composition API - Dependency Injection
+**URL:** https://vuejs.org/api/composition-api-dependency-injection.html
+- `provide()`, `inject()`
+- `hasInjectionContext()`
+
+### Composition API - Helpers
+**URL:** https://vuejs.org/api/composition-api-helpers.html
+- `useAttrs()`, `useSlots()`
+- `useModel()`, `useTemplateRef()`
+- `useId()`, `useCssModule()`
+
+### Options API - State
+**URL:** https://vuejs.org/api/options-state.html
+- `data`, `props`, `computed`
+- `methods`, `watch`, `emits`
+- `expose`
+
+### Options API - Rendering
+**URL:** https://vuejs.org/api/options-rendering.html
+- `template`, `render`
+- `compilerOptions`
+
+### Options API - Lifecycle
+**URL:** https://vuejs.org/api/options-lifecycle.html
+- `beforeCreate`, `created`
+- `beforeMount`, `mounted`
+- `beforeUpdate`, `updated`
+- `beforeUnmount`, `unmounted`
+- `errorCaptured`, `renderTracked`, `renderTriggered`
+- `activated`, `deactivated`, `serverPrefetch`
+
+### Options API - Composition
+**URL:** https://vuejs.org/api/options-composition.html
+- `provide`, `inject`
+- `mixins`, `extends`
+
+### Options API - Misc
+**URL:** https://vuejs.org/api/options-misc.html
+- `name`, `inheritAttrs`, `components`, `directives`
+
+### Component Instance
+**URL:** https://vuejs.org/api/component-instance.html
+- `$data`, `$props`, `$el`, `$refs`
+- `$parent`, `$root`, `$slots`, `$attrs`
+- `$watch()`, `$emit()`, `$forceUpdate()`, `$nextTick()`
+
+### Built-in Directives
+**URL:** https://vuejs.org/api/built-in-directives.html
+- `v-text`, `v-html`, `v-show`, `v-if`, `v-else`, `v-else-if`, `v-for`
+- `v-on`, `v-bind`, `v-model`
+- `v-slot`, `v-pre`, `v-once`, `v-memo`, `v-cloak`
+
+### Built-in Components
+**URL:** https://vuejs.org/api/built-in-components.html
+- `<Transition>`, `<TransitionGroup>`
+- `<KeepAlive>`, `<Teleport>`, `<Suspense>`
+
+### Built-in Special Elements
+**URL:** https://vuejs.org/api/built-in-special-elements.html
+- `<component>`, `<slot>`
+
+### Built-in Special Attributes
+**URL:** https://vuejs.org/api/built-in-special-attributes.html
+- `key`, `ref`, `is`
+
+### Single-File Component Syntax
+**URL:** https://vuejs.org/api/sfc-syntax.html
+- Language blocks
+- Automatic name inference
+- Pre-processors
+- Src imports
+- Custom blocks
+
+### SFC `<script setup>`
+**URL:** https://vuejs.org/api/sfc-script-setup.html
+- Basic syntax
+- Top-level bindings
+- Using components
+- Using custom directives
+- defineProps(), defineEmits()
+- defineExpose(), defineOptions(), defineSlots(), defineModel()
+- useSlots(), useAttrs()
+- Normal `<script>` alongside `<script setup>`
+
+### SFC CSS Features
+**URL:** https://vuejs.org/api/sfc-css-features.html
+- Scoped CSS
+- CSS modules
+- `v-bind()` in CSS
+- `<style>` with `src` imports
+
+---
+
+## TypeScript Patterns
+
+### TypeScript with Composition API
+**URL:** https://vuejs.org/guide/extras/composition-api-faq.html
+- Define props with runtime object syntax
+- Define emits with array/object syntax
+- Use JSDoc for complex shapes
+- Keep composables in `use*.ts`
+- Prefer clear runtime validation for public component APIs
+
+### TypeScript with Options API
+**URL:** https://vuejs.org/guide/essentials/component-basics.html
+- Use `props` runtime validation
+- Keep event names explicit in `emits`
+- Avoid implicit global properties where possible
+- Prefer composition API for new code
+
+### Overview
+**URL:** https://vuejs.org/guide/scaling-up/tooling.html
+- IDE support
+- Linting and formatting integration
+- Volar extension basics
+- Build-tool and plugin usage notes
+
+---
+
+## Additional Resources
+
+### Best Practices
+**URL:** https://vuejs.org/guide/best-practices/production-deployment.html
+- Production deployment
+- Performance
+- Accessibility
+- Security
+
+### Scaling Up
+**URL:** https://vuejs.org/guide/scaling-up/sfc.html
+- Single-File Components
+- Tooling
+- Routing
+- State management
+- Testing
+- Server-Side Rendering (SSR)
+
+### Style Guide
+**URL:** https://vuejs.org/style-guide/
+- Priority A: Essential (Error Prevention)
+- Priority B: Strongly Recommended
+- Priority C: Recommended
+- Priority D: Use with Caution
+
+### Vue Router
+**URL:** https://router.vuejs.org/
+- Official routing library
+
+### Pinia
+**URL:** https://pinia.vuejs.org/
+- Official state management library
+
+### Vite
+**URL:** https://vitejs.dev/
+- Recommended build tool
+
+---
+
+## Quick Search Tips
+
+When searching official docs:
+1. Use the search bar at https://vuejs.org
+2. For API details, go directly to https://vuejs.org/api/
+3. For guides and concepts, start at https://vuejs.org/guide/
+4. For examples, check https://vuejs.org/examples/
+
+All documentation is available in multiple languages using the language selector.