vue cli plugin import components
Release 1.2.2
استيراد المكونات تلقائيًا في تطبيق Vue CLI الخاص بك مع هز الأشجار ، ودعم Vue 2 و 3.
الخروج من مقالتي حول سبب وجود هذه الميزة ، وكيف تعمل والقضايا.
هل تحتاج إلى شيء أكثر قوة؟ النظر في استخدام unplugin-vue-components
تثبيت باستخدام Vue CLI. (ينصح Vue CLI 4+)
vue add import-components أضف مكونات إلى components/ مجلدك.
| components/
--- | ComponentFoo.vue
--- | ComponentBar.vue استخدمها في أي .vue كما تفعل عادة. الوصول إلى مكوناتك إما باستخدام Pascalcase أو Kebab-case.
< template >
< div >
< ComponentFoo />
< component-bar />
</ div >
</ template > إزالة imports components من قسم script .
يمكنك تحميل المكونات الخاصة بك ASYNC عن طريق بادئة اسم المكون الخاص بك مع Lazy أو lazy- ، اعتمادا على بناء الجملة الخاص بك.
< template >
< div >
<!-- ComponentFoo will be loaded in async -->
< LazyComponentFoo />
<!-- ComponentBar will be loaded sync -->
< ComponentBar />
</ div >
</ template > يمكنك تغيير سلوك المكون الإضافي عن طريق تعديل الخيارات في ./vue.config.js .
// vue.config.js
module . exports = {
pluginOptions : {
components : {
...
}
}
}جميع الخيارات اختيارية.
المسار المستخدم للمسح الضوئي للعثور على المكونات. ملاحظة: يجب أن تكون بالنسبة إلى جذر مشروعك.
الافتراضي: ./src/components
Regex للعثور على الملفات داخل path . ملاحظة: إذا قمت بحذف النمط ، فسيستخدم extensions المكونة
الافتراضي: **/*.{${extensions.join(',')},}
Regex لتجاهل الملفات داخل path .
الافتراضي: [ '**/*.stories.js' ],
وظيفة يمكنك استخدامها لتصفية المسارات التي لا تريد مسحها.
على سبيل المثال ، إذا أردنا الوصول إلى مكوناتك تلقائيًا فقط عندما يتم تسبقها auto ، فيمكنك استخدام الرمز أدناه.
// vue.config.js
module . exports = {
pluginOptions : {
components : {
// prefix all automatically imported components with an auto prefix
mapComponent ( component ) {
component . pascalCase = 'Auto' + upperFirst ( component . pascalCase )
component . kebabName = 'auto-' + component . pascalCase
return component
}
}
}
} عند مسح المسار للمكونات ، والتي ينبغي اعتبار الملفات مكونات.
الافتراضي: ['.js', '.vue', '.ts']
واردات ثابتة فقط
فقط المكونات المحددة بشكل ثابت داخل القالب الخاص بك ستعمل.
< template >
< component :is = " dynamicComponent " />
</ template >باستخدام المجلدات كمساحات أسماء
من المفترض أنك تستخدم اتفاقيات VUE لتسمية مكوناتك. لن يعمل أدناه دون رسم خرائط للمكونات يدويًا.
| components/
--- | Foo.vue
------ | Namespace/Foo.vue من شأنه أن يخلق تعارضا مع مكونين يسمى Foo.vue . يجب عليك تسمية ملفاتك المكونة مع مساحة الاسم. أي NamespaceFoo.vue .
مكونات JavaScript
قد تحتاج إلى تحديث متصفحك عند تحديثه. يبدو أن إعادة تحميل الوحدة الساخنة هي بعض العربات التي تجرها الدواب في بعض الأحيان.
يوصى بالالتزام بمكونات .vue SFC.
معهد ماساتشوستس للتكنولوجيا
