vue cli plugin import components

Komponen Vue-Cli-Plugin-Impor

Secara otomatis mengimpor komponen di aplikasi Vue Cli Anda dengan pengocok pohon, mendukung Vue 2 dan 3.

Mengapa dan bagaimana?

Lihat artikel saya tentang mengapa fitur ini ada, cara kerjanya dan masalah.

Butuh sesuatu yang lebih kuat? Pertimbangkan untuk menggunakan komponen unplugin-vue

Fitur

• ? Dukungan Vue 2 dan 3 dengan pengocok pohon penuh
• ⚡ Malas muat komponen Anda
• Reload Modul Panas Siap
• ? Ditulis dalam naskah

Pengaturan

Instal menggunakan vue cli. (Vue CLI 4+ direkomendasikan)

vue add import-components

---

Penggunaan

Tambahkan komponen ke components/ folder Anda.

 | components/
--- | ComponentFoo.vue
--- | ComponentBar.vue

Gunakan mereka di .vue apa pun seperti biasanya. Akses komponen Anda dengan case pascalcase atau kebab.

 < template >
< div >
  < ComponentFoo />
  < component-bar />
</ div >
</ template >

Hapus imports dan components dari bagian script .

Pemuatan Komponen Async

Anda dapat memuat komponen Anda async dengan mengawali nama komponen Anda dengan Lazy atau lazy- , tergantung pada sintaks Anda.

 < template >
< div >
  <!-- ComponentFoo will be loaded in async -->
  < LazyComponentFoo />
  <!-- ComponentBar will be loaded sync -->
  < ComponentBar />
</ div >
</ template > 

Konfigurasi

Anda dapat mengubah perilaku plugin dengan memodifikasi opsi di ./vue.config.js .

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      ...
    }
  }
}

Opsi

Semua opsi opsional.

Jalur - String

Jalur yang digunakan untuk memindai untuk menemukan komponen. Catatan: Itu harus relatif terhadap root proyek Anda.

Default: ./src/components

pola - string

Regex untuk menemukan file di dalam path . Catatan: Jika Anda menghilangkan pola itu akan menggunakan extensions yang dikonfigurasi

Default: **/*.{${extensions.join(',')},}

abaikan - string []

Regex untuk mengabaikan file dalam path .

Default: [ '**/*.stories.js' ],

MapComponent - (komponen: komponen) => komponen | PALSU

Fungsi yang dapat Anda gunakan untuk menyaring jalur yang tidak ingin Anda pindai.

Misalnya, jika kami ingin mengakses komponen Anda secara otomatis hanya ketika mereka diawali dengan auto , Anda dapat menggunakan kode di bawah ini.

 // 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
      }
    }
  }
} 

Ekstensi - String []

Saat memindai jalur untuk komponen, file mana yang harus dipertimbangkan komponen.

Default: ['.js', '.vue', '.ts']

Batasan

Impor statis saja

Hanya komponen yang didefinisikan secara statis dalam templat Anda yang akan berfungsi.

< template >
  < component :is = " dynamicComponent " />
</ template >

Menggunakan folder sebagai namespaces

Diasumsikan Anda menggunakan konvensi VUE untuk menamai komponen Anda. Di bawah ini tidak akan berfungsi tanpa memetakan komponen secara manual.

 | components/
--- | Foo.vue
------ | Namespace/Foo.vue

Ini akan menciptakan konflik dengan dua komponen yang disebut Foo.vue . Anda harus memberi nama file komponen Anda dengan namespace. yaitu NamespaceFoo.vue .

Komponen JavaScript

Anda mungkin perlu menyegarkan browser Anda saat Anda memperbaruinya. Reload modul panas tampaknya kadang -kadang sedikit buggy.

Disarankan agar Anda tetap dengan komponen .vue SFC.

Lisensi

Mit