vue-development-guides
Применение лучших практик разработки Vue.js
Проекты Vue.js часто страдают от неясного потока данных и ошибок реактивности. Этот навык предоставляет комплексные лучшие практики для разработки на Vue 3 и Nuxt 3, включая правильное управление состоянием, паттерны компонентов и архитектуру потока данных.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "vue-development-guides". Код компонента, использующий reactive() и заменяющий весь объект состояния
النتيجة المتوقعة:
- Проблема: proxy reactive() ломается при полной замене объекта
- Решение: Вместо этого используй ref() для замещаемого состояния
- Код:
- const user = ref({ id: 1, name: 'Tom' })
- async function reload() {
- user.value = await fetchUser() // Правильно: переназначает .value
- }
استخدام "vue-development-guides". Дочерний компонент, мутирующий prop, полученный от родителя
النتيجة المتوقعة:
- Проблема: Props доступны только для чтения - их изменение нарушает однонаправленный поток данных
- Решение: Вызывай событие, чтобы родитель обновил источник истины
- Паттерн:
- Child: defineProps<{ count: number }>() + defineEmits<{ (e: 'update', value: number): void }>()
- Parent: <Counter :count="count" @update="count = $event" />
التدقيق الأمني
آمنThis skill is a pure documentation/guide resource containing only markdown files with Vue.js best practices. All static analysis findings are false positives: (1) 'external_commands' alerts are triggered by Markdown backtick syntax for code formatting, not actual command execution; (2) 'network' alerts are documentation URL references to vuejs.org, vueuse.org, and pinia.vuejs.org; (3) No actual cryptographic operations, system reconnaissance, or executable code exists. This skill provides guidance only and does not make network calls, execute commands, or access the file system.
درجة الجودة
ماذا يمكنك بناءه
Проверка архитектуры Vue компонентов
При проверке или аудите кодовой базы Vue.js этот навык помогает выявить нарушения принципа Props Down / Events Up и рекомендует правильные паттерны композиции компонентов.
Исправление проблем реактивности
Когда компоненты Vue ведут себя неожиданно из-за ошибок реактивности, этот навык предоставляет рекомендации по правильному использованию ref, reactive, computed и watchers.
Установка стандартов кодирования команды
При запуске нового проекта на Vue 3 или Nuxt 3 этот навык устанавливает последовательные паттерны для потока данных, управления состоянием и структуры компонентов.
جرّب هذه الموجهات
Проверь мой Vue компонент на соответствие лучшим практикам. Проверь код компонента и убедись, что он следует паттернам Composition API, правильному использованию реактивности и принципам потока данных из навыка vue-development-guides.
Выполни рефакторинг этого Vue компонента с Options API в Composition API с <script setup>. Следуй лучшим практикам vue-development-guides для структуры компонентов, примитивов реактивности и типизации TypeScript.
Проанализируй иерархию компонентов в моем проекте Vue/Nuxt. Проверь, следует ли поток данных принципам Props Down / Events Up, и выяви любые anti-patterns props drilling, которые можно решить с provide/inject или store.
Разработай решение для управления состоянием моего приложения Vue/Nuxt в соответствии с vue-development-guides. Рекомендуй, использовать ли composable stores, VueUse createGlobalState или Pinia в зависимости от масштаба проекта и требований SSR.
أفضل الممارسات
- Используй Composition API с <script setup lang="ts"> как паттерн по умолчанию для компонентов Vue 3 и Nuxt 3.
- Следуй принципу Props Down / Events Up для коммуникации компонентов и избегай прямой мутации состояния родителя из дочерних компонентов.
- Выбирай примитивы реактивности внимательно: ref() для замещаемых значений, reactive() для мутируемых объектов, shallowRef() для непрозрачных данных.
تجنب
- Избегай смешивания паттернов Options API и Composition API непоследовательно в одной кодовой базе.
- Не деструктурируй примитивы из объектов reactive(), так как это отключает их от реактивности.
- Избегай хранения производного состояния в refs вручную, когда computed() может автоматически получить его из источников.