So implementieren Sie On-Demand-Import und globalen Import in Element-Plus

npm installieren unplugin-vue-components

// vite.config.ts
Komponenten aus „unplugin-vue-components/vite“ importieren
importiere { ElementPlusResolver } aus 'unplugin-vue-components/resolvers'
​
Standard exportieren {
  Plugins: [
   // ...
   Komponenten({
    Resolver: [ElementPlusResolver()],
  }),
  ],
}

// webpack.config.js
const-Komponenten = erforderlich('unplugin-vue-components/webpack')
const { ElementPlusResolver } = erfordern('unplugin-vue-components/resolvers')
​
modul.exporte = {
  // ...
  Plugins: [
   Komponenten({
    Resolver: [ElementPlusResolver()],
  }),
  ],
}

//main.ts
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
​
import { Bearbeiten,Suchen } von '@element-plus/icons' //Symbole müssen separat importiert werden, Symbole bei Bedarf importieren import { ElButton } von 'element-plus'; //Bei Bedarf importieren
const app = erstelleApp(App);
//Komponente registrieren app.component("edit", Bearbeiten)
app.component("search", Suche)
app.component('ElButton',ElButton)
app.mount('#app');

<Vorlage>
    <h2>Startseite</h2>
   <el-button type="primary" >Primäre Schaltfläche</el-button>
   <el-button type="success" >Erfolg-Button</el-button>
   <el-icon :Größe="20" :Farbe="'blau'">
     <Bearbeiten />
   </el-Symbol>
   <el-Symbol: Größe = "20">
     <Suche></Suche>
   </el-Symbol>
</Vorlage>
<script setup lang="ts"> 
</Skript>

// tsconfig.json
{
  "Compileroptionen": {
   // ...
   "Typen": ["element-plus/global"]
  }
}

npm installiere element-plus --save
# oder
Garn hinzufügen Element-Plus
​
# Symbol installieren Symbolabhängigkeitsbibliothek npm install @element-plus/icons
# oder
Garn hinzufügen @element-plus/icons

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere {store, Schlüssel} aus './store';
//Routingimport-Router von „./router“ einfügen;
​
// UI-Bibliothek global importieren importiere ElementPlus von 'element-plus'
importiere 'element-plus/dist/index.css'
​
const app = erstelleApp(App);
app.use(store, Schlüssel);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

//Verwenden Sie <template> direkt nach dem Importieren bestimmter Komponenten
   <el-icon :Größe="20" :Farbe="'blau'">
     <Bearbeiten />
   </el-Symbol>
</Vorlage>
<script setup lang="ts">
   importiere { Bearbeiten } von '@element-plus/icons'
</Skript>

<Vorlage>
    <h2>Startseite</h2>
   <el-button type="primary" >Primäre Schaltfläche</el-button>
   <el-button type="success" >Erfolg-Button</el-button>
   <el-icon :Größe="20" :Farbe="'blau'">
     <Bearbeiten />
   </el-Symbol>
   <el-Symbol: Größe = "20">
     <Suche></Suche>
   </el-Symbol>
</Vorlage>
<script setup lang="ts"> 
</Skript>