vue cli plugin import components

VUE-CLI-PLUGIN-IMPORT-COMPONENT

自動在Vue Cli應用程序中自動導入樹木搖動的組件，並支持VUE 2和3。

為什麼以及如何？

查看我有關此功能為什麼存在，工作方式和問題的文章。

需要更強大的東西嗎？考慮使用Unplugin-Vue組件

特徵

• ？ vue 2和3支撐，全樹搖動
• ⚡懶惰加載組件
• 熱模塊重新加載準備就緒
• ？用打字稿編寫

設定

使用VUE CLI安裝。 （建議使用CLI 4+）

vue add import-components

---

用法

將組件添加到您的components/文件夾中。

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

按照.vue來使用它們。使用pascalcase或kebab-case訪問組件。

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

從script部分中刪除imports和components 。

異步組件加載

您可以根據您的語法將組件名稱以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 components

模式 - 字符串

正則是在path中查找文件。注意：如果省略模式，它將使用配置的extensions

預設值: **/*.{${extensions.join(',')},}

忽略 - 字符串[]

正則忽略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組件。

執照

麻省理工學院