vue cli plugin import components

Vue-Cli-plugin-import-components

นำเข้าส่วนประกอบโดยอัตโนมัติในแอพ Vue CLI ของคุณด้วยการเขย่าต้นไม้รองรับ Vue 2 และ 3

ทำไมและอย่างไร?

ชำระเงินบทความของฉันเกี่ยวกับสาเหตุที่คุณลักษณะนี้มีอยู่วิธีการทำงานและปัญหา

ต้องการอะไรที่ทรงพลังกว่านี้หรือไม่? พิจารณาใช้องค์ประกอบของช่องคลอดบุตร

คุณสมบัติ

• - Vue 2 และ 3 สนับสนุนด้วยการเขย่าต้นไม้เต็มรูปแบบ
• ⚡ขี้เกียจโหลดส่วนประกอบของคุณ
• Hot Module Reloading Ready
• - เขียนด้วย TypeScript

การตั้งค่า

ติดตั้งโดยใช้ 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

คุณสามารถโหลดส่วนประกอบของคุณ 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' ],

MAPCOMPONENT - (ส่วนประกอบ: ส่วนประกอบ) => ส่วนประกอบ | เท็จ

ฟังก์ชั่นที่คุณสามารถใช้เพื่อกรองเส้นทางที่คุณไม่ต้องการสแกน

ตัวอย่างเช่นหากเราต้องการเข้าถึงส่วนประกอบของคุณโดยอัตโนมัติเฉพาะเมื่อพวกเขานำหน้าด้วย 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 ส่วนประกอบ

ใบอนุญาต

มิกซ์