vue cli plugin import components

Vue-Cli-Plugin-Import-Components

Vue 2および3をサポートするツリーの揺れで、Vue CLIアプリにコンポーネントを自動的にインポートします。

なぜ、そしてどのように？

この機能が存在する理由、それがどのように機能するか、問題について私の記事をチェックしてください。

もっと強力なものが必要ですか？プルーギンを使用することを検討してください

特徴

• ？ Vue 2と3は、完全な木の揺れでサポートしています
• componenceコンポーネントを怠loadします
• ホットモジュールリロード準備完了
• ？ TypeScriptで書かれています

設定

Vue CLIを使用してインストールします。 （Vue CLI 4+をお勧めします）

vue add import-components

---

使用法

components/フォルダーにコンポーネントを追加します。

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

通常のように任意の.vueでそれらを使用します。 PascalcaseまたはKebabケースのいずれかでコンポーネントにアクセスします。

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

拡張機能-String []

コンポーネントのパスをスキャンするときは、ファイルをコンポーネントと見なす必要があります。

デフォルト： ['.js', '.vue', '.ts']

制限

静的インポートのみ

テンプレート内で静的に定義されているコンポーネントのみが機能します。

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

名前空間としてフォルダーを使用します

コンポーネントを命名するためにVueの規則を使用していると想定されています。以下は、コンポーネントを手動でマッピングせずに機能しません。

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

Foo.vueと呼ばれる2つのコンポーネントとの競合を作成します。名前空間でコンポーネントファイルに名前を付ける必要があります。 IE NamespaceFoo.vue 。

JavaScriptコンポーネント

ブラウザを更新するときは、ブラウザを更新する必要がある場合があります。ホットモジュールのリロードは、時々少しバグがあるようです。

.vue SFCコンポーネントに固執することをお勧めします。

ライセンス

mit