オンデマンドで Vue コンポーネントを自動的にインポートする方法

'vue' から {createApp} をインポートします。
'./components/HelloWorld' から HelloWorld をインポートします。

const アプリ = createApp({})

// hello-wolrd という名前のコンポーネントをグローバルに登録します。app.component('hello-wolrd', HelloWorld);

モジュール 'vue' を宣言します {
  エクスポートインターフェース GlobalComponents {
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  }
}

<テンプレート>
  <HelloWorld msg="Vue.js アプリへようこそ"/>
</テンプレート>

<スクリプト>
'./components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    こんにちは世界
  }
}
</スクリプト>

'./components/HelloWorld.vue' から HelloWorld をインポートします。
エクスポートデフォルト{
  名前: "アイテム",
  与える（）{
    戻る （
      <HelloWorld msg="Vue.js アプリへようこそ"/>
    ）
  }
}

'./components/HelloWorld.vue' から HelloWorld をインポートします。

// vite.config.ts
'unplugin-vue-components/vite' からコンポーネントをインポートします。

デフォルトのdefineConfigをエクスポートする({
  プラグイン: [
    コンポーネント({ /* オプション */ }),
  ]、
})

// ロールアップ.config.js
'unplugin-vue-components/rollup' からコンポーネントをインポートします。

エクスポートデフォルト{
  プラグイン: [
    コンポーネント({ /* オプション */ }),
  ]、
}

// webpack.config.js
モジュール.エクスポート = {
  /* ... */
  プラグイン: [
    require('unplugin-vue-components/webpack')({ /* オプション */ })
  ]
}

<テンプレート>
  <div>
    <HelloWorld メッセージ="こんにちは Vue 3.0 + Vite" />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<テンプレート>
  <div>
    <HelloWorld メッセージ="こんにちは Vue 3.0 + Vite" />
  </div>
</テンプレート>

<スクリプト>
'./src/components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    こんにちは世界
  }
}
</スクリプト>

Vue.component('コンポーネント名', { /* ... */ })
ケバブケース（ダッシュで区切られた名前）を使用してコンポーネントを定義する場合、
また、カスタム要素を参照するときには、ケバブケースを使用する必要があります (例: <my-component-name> )。

Vue.component('MyComponentName', { /* ... */ })
PascalCaseを使用してコンポーネントを定義する場合、
カスタム要素を参照するときは、どちらの命名法も使用できます。
つまり、<my-component-name> と <MyComponentName> の両方が許容されます。
ただし、DOM 内で直接使用される場合 (つまり、文字列以外のテンプレートの場合) は、ケバブケースのみが有効であることに注意してください。