Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

糸追加要素プラス
＃ または
npm インストール element-plus --save

'vue' から {createApp} をインポートします。
'element-plus' から ElementPlus をインポートします。
'element-plus/lib/theme-chalk/index.css' をインポートします。
'./App.vue' からアプリをインポートします。

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

yarn に vite-plugin-importer を追加
＃ または
npm インストール vite-plugin-importer --save

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'vite-plugin-importer' から usePluginImport をインポートします

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  プラグイン: [
    vue(),
    プラグインインポート({
      ライブラリ名: 'element-plus',
      カスタムスタイル名: (名前) => {
        `element-plus/lib/theme-chalk/${name}.css` を返します。
      },
    }）、
  ]、
  解決する： {
    エイリアス: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
})

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'element-plus' から { ElButton、ElSelect } をインポートします。

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

yarn に vite-plugin-style-import -D を追加します
＃ または
npm i vite-plugin-style-import -D

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'vite-plugin-style-import' から styleImport をインポートします。

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  プラグイン: [
    vue(),
    スタイルインポート({
      ライブラリ: [
        {
          ライブラリ名: 'element-plus',
          esModule: true、
          スタイルファイルを確認する: true,
          解決スタイル: (名前) => {
            `element-plus/lib/theme-chalk/${name}.css` を返します。
          },
          解決コンポーネント: (名前) => {
            `element-plus/lib/${name}` を返します。
          },
        },
      ]、
    }）、
  ]、
  解決する： {
    エイリアス: {
      'vue': 'vue/dist/vue.esm-bundler.js' 
    },
  },
})

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'element-plus' から { ElButton、ElSelect } をインポートします。

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')