Führen Sie die Schritte zur Verwendung des Elements in vue3.0 aus

Führen Sie die Schritte zur Verwendung des Elements in vue3.0 aus

Vorwort:

Verwenden Sie das Element-Framework in vue3.0, da das Element vue2.0 unterstützt und die Version, die vue3.0 unterstützt, Element-Plus heißt

Offizieller Website-Zugang: Klicken Sie hier, um einzutreten

1. Persönliche Probleme und Lösungen:

Aufgetretene Probleme:

Ich habe die Version direkt mit cnpm i element-plus -S installiert. Ich weiß nicht warum, aber es meldet immer wieder den Fehler Abbildung 1, das Versionsmodell Abbildung 2 und mein Code verwendet Abbildung 3

Lösung:

Ich habe die Version von element-plus in package.json in den folgenden Satz geändert, wodurch das Problem gelöst wurde (ob es sich um das Problem der neuesten Version handelt, wird noch überprüft).

"element-plus": "^1.0.1-alpha.19",

2. Spezifische Verwendung

1. Globale Einführung:

Installieren Sie cnpm i element-plus -S

Zu main.js hinzufügen:

importiere 'element-plus/lib/theme-chalk/index.css'
Importieren Sie ElementPlus von „element-plus“.
 
const app = createApp(App)
app.use(ElementPlus)
app.verwenden(speichern).verwenden(router).mount('#app')

Normale Nutzung auf der Seite

2. Import auf Anfrage:

(1) Installieren Sie cnpm i element-plus -S

(2) Fügen Sie einen neuen Ordner plugins hinzu und erstellen Sie eine neue Konfigurationsdatei element.js

importieren {
 // ElAlarm,
 ElAside,
 // ElAutocomplete,
 // ElAvatar,
 // ElBacktop,
 // ElBadge,
 // ElBreadcrumb,
 // ElBreadcrumbItem,
 ElButton,
 // ElButtonGruppe,
 // ElCalendar,
 // ElCard,
 // ElCarousel,
 // ElCarouselItem,
 // ElCascader,
 // ElCascaderPanel,
 // ElCheckbox,
 // ElCheckboxButton,
 // ElCheckboxGroup,
 // ElCol,
 // ElCollapse,
 // ElCollapseItem,
 // ElCollapseTransition,
 // ElColorPicker,
 ElContainer,
 // ElDatePicker,
 // ElDialog,
 // ElDivider,
 // ElDrawer,
 ElDropdown,
 ElDropdownItem,
 ElDropdownMenü,
 // ElFooter,
 ElForm,
 ElFormItem,
 ElHeader,
 // ElIcon,
 // ElBild,
 ElEingang,
 // ElEingabenummer,
 // ElLink,
 ElMain,
 ElMenü,
 ElMenüelement,
 ElMenuItemGroup,
 // ElOption,
 // ElOptionGroup,
 // ElPageHeader,
 // ElPaginierung,
 ElPopbestätige,
 // ElPopover,
 ElPopper,
 // ElFortschritt,
 // ElRadio,
 // ElRadioButton,
 // ElRadioGroup,
 // ElRate,
 // ElRow,
 // ElScrollBar,
 // ElAuswahl,
 // ElSlider,
 // ElStep,
 // ElSchritte,
 ElUntermenü,
 // ElSchalter,
 ElTabPane,
 ElTabs,
 // ElTabelle,
 // ElTableColumn,
 // ElTimeline,
 // ElTimelineItem,
 ElTooltip,
 // ElTransfer,
 // ElBaum,
 // ElUpload,
 // ElInfiniteScroll,
 // ElWird geladen,
 // ElNachricht,
 ElMessageBox,
 ElBenachrichtigung
} von 'element-plus'
importiere Sprache aus „element-plus/lib/locale/lang/zh-cn“
Gebietsschema aus „element-plus/lib/locale“ importieren
 
exportiere Standard (App) => {
 locale.use(lang)
 app.verwenden(ElButton)
 app.use(ElBenachrichtigung)
 app.use(ElContainer)
 app.use(ElAside)
 app.use(ElHeader)
 app.use(ElMain)
 app.verwenden(ElDropdown)
 app.use(ElDropdownItem)
 app.use(ElDropdownMenu)
 app.use(ElTabPane)
 app.use(ElTabs)
 app.use(ElMenu)
 app.use(ElMenuItem)
 app.use(ElMenuItemGroup)
 app.use(ElSubmenü)
 app.use(ElTooltip)
 app.verwenden(ElPopper)
 app.use(ElPopbestätigung)
 app.use(ElMessageBox)
 app.use(ElInput)
 app.use(ElForm)
 app.use(ElFormItem)
}

(3) Konfiguration in main.js

(4) Benutze es einfach wie ein normales Element

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Elementen in vue3.0. Weitere relevante Inhalte zur Verwendung von Elementen in vue3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwenden Sie das Vue-Element-Admin-Framework, um die Menüfunktion dynamisch vom Backend abzurufen
  • Die Vue+elementUI-Komponente implementiert rekursiv eine faltbare, dynamische Rendering-Seitenleistennavigation auf mehreren Ebenen
  • Beispielcode von Vue + Element UI zur Realisierung der Player-Funktion
  • Analyse des Hintergrundauthentifizierungsprozesses von Vue-Elementen
  • Vue basierend auf einer Element-Button-Berechtigungsimplementierungslösung
  • Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten
  • Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt
  • Vue imitiert den Formularbeispielcode von ElementUI
  • So kapseln Sie die Tabellenkomponente von Vue Element
  • Vue Element Front-End-Anwendungsentwicklung Konventionelle Element-Schnittstellenkomponenten

<<:  So importieren Sie txt in MySQL unter Linux

>>:  Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

Artikel empfehlen

Detaillierte Erklärung des JQuery-Selektors

Inhaltsverzeichnis Grundlegende Selektoren: Ebene...

Detailliertes Tutorial zur Installation von mysql-8.0.20 unter Linux

** Installieren Sie mysql-8.0.20 unter Linux ** U...

Implementierung der Nummernschild-Eingabefunktion im WeChat-Applet

Inhaltsverzeichnis Vorwort Hintergrund Große Verm...

Über die Implementierung des JavaScript-Karussells

Heute ist ein weiterer sehr praktischer Fall. All...

Detaillierte grafische Erklärung zur Verwendung von SVG im Vue3+Vite-Projekt

Heute habe ich bei der Verwendung von SVG in der ...

Tipps zum Schreiben prägnanter React-Komponenten

Inhaltsverzeichnis Vermeiden Sie die Verwendung d...

jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

Wir sehen oft, dass Anzeigen nach ein paar Sekund...

Zusammenfassung der Vue Watch-Überwachungsmethoden

Inhaltsverzeichnis 1. Die Rolle der Uhr in Vue is...

Welche Eigenschaften sollte eine gute Werbung haben?

Manche Leute sagen, dass Werbung machen wie ein Me...

CSS-Stil zum Zentrieren des HTML-Tags im Browser

CSS-Stil: Code kopieren Der Code lautet wie folgt:...

Tutorial zu HTML-Tabellen-Tags (11): Horizontales Ausrichtungsattribut ALIGN

In horizontaler Richtung können Sie die Ausrichtu...