📦

vue-best-practices

Name: vue-best-practices
Author: hyf0

آمن 📁 الوصول إلى نظام الملفات🌐 الوصول إلى الشبكة

تطبيق أفضل ممارسات Vue 3 مع TypeScript

متاح أيضًا من: antfu,vuejs-ai

مشاريع Vue 3 غالباً ما تحتوي على أخطاء في النوع ومشاكل في الإعدادات يصعب تصحيحها يدوياً. توفر هذه المهارة قواعد فحص تلقائية وإصلاحات لكتابة أنواع مكونات Vue، وتكوين Volar، وفحص قوالب vue-tsc الصارم، وأنماط Vue.js الشائعة.

يدعم: Claude Codex Code(CC)

📊 71 كافٍ

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "vue-best-practices". How do I extract the type of props from a child Vue component?

النتيجة المتوقعة:

استخدم ComponentProps من vue-component-type-helpers:
```typescript
import type { ComponentProps } from 'vue-component-type-helpers'
import ChildComponent from './ChildComponent.vue'
// استخدم كنوع prop
defineProps<{
childProps: ComponentProps<typeof ChildComponent>
}>()
```

استخدام "vue-best-practices". My CSS modules are not catching typos in class names

النتيجة المتوقعة:

قم بتفعيل CSS modules الصارمة في tsconfig:
```json
{
"vueCompilerOptions": {
"target": 3,
"strictCSSModules": true
}
}
```
سيؤدي هذا إلى حدوث أخطاء TypeScript عند استخدام اسم فئة غير موجود في ملف .module.css الخاص بك.

استخدام "vue-best-practices". How do I allow data-* attributes with strictTemplates?

النتيجة المتوقعة:

أضف dataAttributes إلى vueCompilerOptions:
```json
{
"vueCompilerOptions": {
"target": 3,
"dataAttributes": ["data-*"]
}
}
```
يتيح هذا لأي سمة تبدأ بـ "data-" اجتياز فحص النوع.

التدقيق الأمني

آمن

v1 • 1/23/2026

Documentation-only skill containing Vue.js best practices. Static findings are false positives caused by the scanner misidentifying markdown code fences (backticks) as Ruby shell execution and documentation links as hardcoded URLs. No executable code exists in this skill.

الملفات التي تم فحصها

1,514

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات متوسطة المخاطر (2)

rules/codeactions-save-performance.md:32-75 rules/data-attributes-config.md:13-70 rules/deep-watch-numeric.md:13-91 rules/define-model-update-event.md:13-73 rules/duplicate-plugin-detection.md:13-95 rules/extract-component-props.md:13-53 rules/fallthrough-attributes.md:13-59 rules/hmr-vue-ssr.md:13-117 rules/module-resolution-bundler.md:13-75 rules/pinia-store-mocking.md:13-154 rules/script-setup-jsdoc.md:13-81 rules/strict-css-modules.md:13-64 rules/volar-3-breaking-changes.md:17-58 rules/vue-directive-comments.md:21-62 rules/vue-router-typed-params.md:13-75 rules/vue-tsc-strict-templates.md:13-64 rules/with-defaults-union-types.md:13-97

Markdown Code Fences Misidentified as Shell Commands

The static scanner flagged backtick characters in markdown code blocks as 'Ruby/shell backtick execution'. This is a false positive - the backticks are markdown syntax for code fences, not executable shell commands.

rules/codeactions-save-performance.md:79 rules/data-attributes-config.md:74 rules/deep-watch-numeric.md:96-97 rules/define-model-update-event.md:77-79 rules/duplicate-plugin-detection.md:101-102 rules/extract-component-props.md:57 rules/fallthrough-attributes.md:63 rules/hmr-vue-ssr.md:123-124 rules/module-resolution-bundler.md:79-81 rules/pinia-store-mocking.md:158-159 rules/script-setup-jsdoc.md:85 rules/strict-css-modules.md:68 rules/volar-3-breaking-changes.md:64-65 rules/vue-directive-comments.md:73 rules/vue-router-typed-params.md:79-81 rules/vue-tsc-strict-templates.md:68-69 rules/with-defaults-union-types.md:101-102

Documentation Links Misidentified as Hardcoded URLs

The static scanner flagged URL references in documentation as 'Hardcoded URL'. These are legitimate external resource links in markdown files, not runtime network requests.

مشكلات منخفضة المخاطر (1)

rules/duplicate-plugin-detection.md:48 rules/hmr-vue-ssr.md:89

Path Traversal Patterns in Documentation Examples

The scanner detected path traversal sequences (../) in markdown files. These are relative path references to other documentation files within the skill, not filesystem operations.

عوامل الخطر

📁 الوصول إلى نظام الملفات (2)

rules/duplicate-plugin-detection.md:48 rules/hmr-vue-ssr.md:89

🌐 الوصول إلى الشبكة (3)

SKILL.md:36 SKILL.md:37 SKILL.md:38

تم تدقيقه بواسطة: claude

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

إصلاح أخطاء الأنواع في مكونات Vue

احصل على مساعدة في استخراج أنواع TypeScript الصحيحة من مكونات Vue عند ظهور أخطاء في الأنواع في props أو emits أو مكونات الغلاف.

تكوين إعدادات Volar و vue-tsc

تعلم أفضل الممارسات لتكوين محرر Volar وفحص نوع القالب باستخدام vue-tsc لاكتشاف الأخطاء مبكراً.

الانتقال إلى أنماط Vue 3.5+

إصلاح الأنماط المهملة عند الترقية إلى Vue 3.5+ بما في ذلك defineModel، ومراقبة المصفوفات العميقة، وميزات التفاعل الجديدة.

جرّب هذه الموجهات

استخراج نوع Props

لدي مكون Vue أريد استخدامه كغلاف. كيف يمكنني استخراج النوع الصحيح لـ TypeScript لخصائصه حتى أتمكن من استخدامها في مكون أب؟ المكون الابن يستخدم <script setup>.

إصلاح أخطاء نوع القالب

قوالب Vue تعرض أخطاء 'مكون غير معرّف' على الرغم من وجود المكونات. كيف أقوم بتكوين strictTemplates في vue-tsc للعمل بشكل صحيح مع مشروعي؟

كتابة أنواع السمات العابرة

كيف أقوم بكتابة النوع الصحيح للسمات العابرة ($attrs) عند إنشاء مكون غلاف يمرر props لمكون ابن؟

ترحيل defineModel في Vue 3.5

أحصل على أخطاء حدث تحديث 'defineModel' في Vue 3.5. كيف أقوم بتعريف حدث التحديث الصحيح للربط ثنائي الاتجاه مع defineModel؟

أفضل الممارسات

استخدم ComponentProps من vue-component-type-helpers بدلاً من استخراج النوع اليدوي لمكونات الغلاف
فعّل strictTemplates في vue-tsc لاكتشاف أخطاء نوع القالب أثناء التطوير
كونّف Volar 3.0 مع vueCompilerOptions.target مضبوط على 3 للتوافق مع Vue 3.5+

تجنب

استخدام تقاطعات النوع اليدوية لـ props بدلاً من vue-component-type-helpers
تجاهل أخطاء نوع القالب بدلاً من إصلاح مشاكل النوع الأساسية
عدم تكوين dataAttributes عند استخدام سمات data-* مخصصة في القوالب

الأسئلة المتكررة

ما الفرق بين vue-tsc و Volar؟

Volar هو إضافة VSCode التي توفر دعم اللغة لـ Vue. vue-tsc هو غلاف TypeScript compiler الذي يشغل فحص النوع من Volar من سطر الأوامر. إنهما يتشاركان نفس منطق فحص النوع الأساسي.

كيف أقوم بإصلاح أخطاء 'لا يمكن العثور على الوحدة' في مشاريع Vue؟

تأكد من أن tsconfig.json يتضمن @vue/tsconfig وأن moduleResolution مضبوط على 'bundler'. أضف مسارات إلى tsconfig.json إذا كنت تستخدم أسماء مسارات مثل @/ أو ~/.

هل يمكن لهذه المهارة تعديل ملفات مشروعي؟

لا. توفر هذه المهارة إرشادات وأمثلة كود وتشرح أفضل الممارسات. إنها لا تعدل ملفات مشروعك مباشرة.

ما إصدارات Vue المدعومة؟

تركز هذه المهارة على Vue 3 مع TypeScript، بما في ذلك ميزات Vue 3.5+ مثل defineModel، ومراقبة المصفوفات العميقة، وتحسينات كتابة أنواع التفاعل.

كيف أقوم بكتابة أنواع معلمات Vue Router؟

استخدم إضافات router المكتوبة مثل unplugin-vue-router أو APIs المكتوبة من vue-router. كونّف router لتصدير RouteRecordRaw مع أنواع params الصحيحة.

هل تعمل هذه المهارة مع Nuxt؟

بعض القواعد تنطبق على مشاريع Nuxt، خاصة حول تكوين TypeScript. ومع ذلك، لدى Nuxt نظام وحدات خاص قد يتطلب أساليب مختلفة.