So laden Sie Komponentenbibliotheken von Drittanbietern bei Bedarf in Vue3

Garn hinzufügen Element-Plus
# ODER
npm installiere element-plus --save

importiere { createApp } von 'vue'
importiere ElementPlus von „element-plus“;
importiere „element-plus/lib/theme-chalk/index.css“;
App aus „./App.vue“ importieren;

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

Garn fügt Vite-Plugin-Importer hinzu
# ODER
npm installiere vite-plugin-importer --save

importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
importiere usePluginImport von „vite-plugin-importer“

// https://vitejs.dev/config/
exportiere Standard-DefineConfig({
  Plugins: [
    vue(),
    usePluginImport({
      Bibliotheksname: "element-plus",
      benutzerdefinierterStilname: (Name) => {
        gibt `element-plus/lib/theme-chalk/${name}.css` zurück;
      },
    }),
  ],
  lösen: {
    Alias: {
      „vue“: „vue/dist/vue.esm-bundler.js“
    },
  },
})

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere { ElButton, ElSelect } von 'element-plus';

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

Garn hinzufügen vite-plugin-style-import -D
# ODER
npm ich vite-plugin-style-import -D

importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
importiere StyleImport von „vite-plugin-style-import“;

// https://vitejs.dev/config/
exportiere Standard-DefineConfig({
  Plugins: [
    vue(),
    StilImport({
      Bibliotheken: [
        {
          Bibliotheksname: "element-plus",
          esModule: true,
          EnsureStyleFile: wahr,
          resolveStyle: (Name) => {
            gibt `element-plus/lib/theme-chalk/${name}.css` zurück;
          },
          resolveComponent: (Name) => {
            gibt `element-plus/lib/${name}` zurück;
          },
        },
      ],
    }),
  ],
  lösen: {
    Alias: {
      „vue“: „vue/dist/vue.esm-bundler.js“ 
    },
  },
})

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere { ElButton, ElSelect } von 'element-plus';

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