[Hämatemesis-Organisation] Über 40 praktische Vue3-Tools geteilt
Es ist fast zwei Jahre her, dass Vue3 offiziell veröffentlicht wurde, und im Februar dieses Jahres wurde es offiziell zur Standardversion des Vue-Projekts. Der folgende Artikel fasst 40 Vue3-Dienstprogramme, UI-Bibliotheken, Plug-Ins und Ökologie zusammen, die ich mit Ihnen teilen möchte. Ich hoffe, dass er für Sie hilfreich sein wird.
1. Vue3 UI-Komponentenbibliothek
Die UI-Komponentenbibliothek kann als Sammlung wiederverwendeter Schnittstellendesignelemente verstanden werden. Die UI-Komponentenbibliothek spielt die Rolle der Verhaltensverbindung im gesamten System, stellt die horizontale Zusammenarbeit zwischen Designern und Entwicklern innerhalb des Teams dar und ist die normative Grundlage, um eine konsistente Produktausgabe sicherzustellen. (Teilen von Lernvideos: Vue-Video-Tutorial)
Hier haben wir 17 Vue3-UI-Komponentenbibliotheken zusammengestellt, darunter 13 Web-UI-Bibliotheken und 4 mobile UI-Bibliotheken. Lesen Sie den Artikel „17 Vue3-Praktische UI-Komponentenbibliotheken (Web + Mobile)“. Teilen》um es zu bekommen.
Web-UI-Bibliothek
ElementUI Plus: eine Komponentenbibliothek für Designer und Entwickler
Ant Design of Vue: Vue von Ant Design implementiert, entwickelt und bedient Backend-Produkte auf Unternehmensebene
BalmUI: UI Komponentenbibliothek basierend auf Googles Material Design
Naive UI: Kostenlose Open-Source-Front-End-UI-Komponentenbibliothek basierend auf Vue 3.0/TypeScript
arco.design: Bytedance-Produktdesignsystem auf Unternehmensebene, unterstützt React und Vue Duale Version
Quasar: ein vollständiges, leistungsorientiertes Framework
. . .
Mobile UI-Bibliothek
Vant: Mobile Komponentenbibliothek
NutUI: Leichte mobile Vue-Komponentenbibliothek im Jingdong-Stil
Varlet: Mobile Komponentenbibliothek im Materialstil
-
Nutui-Bingo: Jingdongs Lotteriekomponentenbibliothek basierend auf NutUI
2, praktische Vue3-Entwicklungstools
Im vorherigen Artikel „7 praktische Vue3-Entwicklungstools, die es wert sind, gesammelt (geteilt) zu werden“ haben wir 7 praktische Vue3-Entwicklungstools vorgestellt:
unplugin-vue-Komponenten: Automatisch Plug-Ins für On-Demand-Komponenten importieren. @vueuse/gesture: Gestenbibliothek, um Anwendungen interaktiv zu machen
unplugin-auto-import
pinia-plugin-persistedstate: Pinia-Datenpersistenzspeicher
vue-termui.dev: Ein Terminal-UI-Framework basierend auf Vue.js
- 3, Vue3-Visualisierungstool
- Mit den häufigen Aktualisierungen der Technologie sind visuelle Entwicklungstools zu einem wirksamen Werkzeug zur Verbesserung der Entwicklungseffizienz geworden. Im vorherigen Artikel „
- [Zusammenfassung] 4 Vue3-Visualisierungstools
“ haben wir 4 Vue3-Visualisierungstools vorgestellt:
Pdfvuer: ein PDF-Viewer für Vue-Anwendungenvue3- marquee: nahtlose Scrollkomponente
Vue-ECharts: Die Vue.js-Komponente von Baidu ECharts Im Artikel „
10 häufig verwendete Vue3-Plugins zur Verbesserung der Entwicklungseffizienz (Come and Collect)- “ haben wir 10 Vue-Plugins kennengelernt, die zur Verbesserung der Effizienz beitragen:
- vue-multiselect-next: Universelle Auswahl/Mehrfachauswahl/ Markierungskomponente für Vue
- vue-print-nb: Anweisungs-Wrapper
- vue-i18n-next: Internationales Plug-in für Vue3
- vue-cropper: Vue-Plug-in zum Zuschneiden von Bildern
Vue Grid Layout: Vues Rasterlayoutsystem
Vue Qrcode Reader: Eine Reihe von Vue.js-Komponenten zum Erkennen und Dekodieren von QR-Codes (QR-Code)
- Makeit Captcha: Slide Block-Bestätigungscode-Plug-in
- vue3-clipboard: Plug-in zum Einfügen und Kopieren basierend auf Vue3
- vue.draggable Vue 3 Drag-and-Drop-Komponente basierend auf Sortable.js
- BetterScroll löst verschiedene Probleme auf der mobilen Seite (PC wird bereits unterstützt). ) Plug-Ins zum Scrollen von Szenen erforderlich
5, Vue3-bezogene Ökologie
-
Im vorherigen Artikel „
6 Praktische Vue3-bezogene Ökologie (Zusammenfassungsfreigabe) “ haben wir etwas über 6 Vue3-bezogene Ökologie gelernt: - Vue-Plug-in-Bibliothek (vue365.cn)
- Pinia: leichte Zustandsverwaltungsbibliothek
- Nuxt-Module
- Nuxt 3: kann zum Erstellen von serverseitigen Rendering-Anwendungen (SSR) verwendet werden
vuepress: Vue-basierter statischer Website-Generator Vueuse: Eine Sammlung grundlegender Vue-Kompositions-Dienstprogrammfunktionen 6, VUE3 Animation Plug-in : https://github.com/antfu/vue-starport/blob/main/README.zh-Hans.mdDemo-Adresse: https://vue-starport.netlify.app/
2 ) @ vueuse/motion 7. Audio- und Videokomponenten github.com/VueUse/sound
【Empfohlene verwandte Video-Tutorials: , Github-Adresse: https://github.com/vueuse/motion
Erste Schritte mit dem Web-Frontend

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Vue.js eignet sich für kleine und mittelgroße Projekte und schnelle Iterationen, während React für große und komplexe Anwendungen geeignet ist. 1) Vue.js ist einfach zu bedienen und für Situationen geeignet, in denen das Team nicht ausreicht oder die Projektskala klein ist. 2) React hat ein reichhaltigeres Ökosystem und eignet sich für Projekte mit hoher Leistung und komplexen funktionalen Bedürfnissen.

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.

Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.

Es gibt zwei Möglichkeiten, Divelemente in Vue zu springen: Verwenden Sie Vue Router und fügen Sie Router-Link-Komponente hinzu. Fügen Sie den @click Event -Listener hinzu und nennen Sie dies. $ Router.push () Methode zum Springen.

Zu den Methoden zum Implementieren des Sprung eines Tags in VUE gehören: Verwenden des A -Tags in der HTML -Vorlage, um das HREF -Attribut anzugeben. Verwenden Sie die Router-Link-Komponente des Vue-Routings. Verwenden Sie dies. $ Router.push () Methode in JavaScript. Parameter können durch den Abfrageparameter weitergeleitet werden, und Routen sind in den Routeroptionen für dynamische Sprünge konfiguriert.

NetflixuSesacustomframeworkcalted "Gibbon" Builtonreact, NotreactorVuedirect.1) TeamExperience: Wählen Sie beobädtes Vertrauen

VUE -Komponentenübergebenwerte sind ein Mechanismus zum Übergeben von Daten und Informationen zwischen Komponenten. Es kann durch Eigenschaften (Requisiten) oder Ereignisse implementiert werden: Props: Deklarieren Sie die Daten, die in der Komponente empfangen werden sollen, und übergeben Sie die Daten in der übergeordneten Komponente. Ereignisse: Verwenden Sie die $ emit-Methode, um ein Ereignis auszulösen und es in der übergeordneten Komponente mithilfe der V-On-Anweisung anzuhören.