Heim Schlagzeilen [Hämatemesis-Organisation] Über 40 praktische Vue3-Tools geteilt

[Hämatemesis-Organisation] Über 40 praktische Vue3-Tools geteilt

Oct 19, 2022 pm 05:52 PM
vue vue.js vue3

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

    Vue Composables bringt Ihre Komponenten in Bewegung

    Offizielle Adresse: https://motion.vueuse.org/

    [Hämatemesis-Organisation] Über 40 praktische Vue3-Tools geteiltGithub-Adresse: https://github.com/vueuse/motion

    7. Audio- und Videokomponenten github.com/VueUse/sound

    【Empfohlene verwandte Video-Tutorials:

    vuejs Einführungs-Tutorial

    , [Hämatemesis-Organisation] Über 40 praktische Vue3-Tools geteiltErste Schritte mit dem Web-Frontend

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

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

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Vue.js vs. React: projektspezifische Überlegungen Vue.js vs. React: projektspezifische Überlegungen Apr 09, 2025 am 12:01 AM

    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.

    So fügen Sie Funktionen zu Schaltflächen für Vue hinzu So fügen Sie Funktionen zu Schaltflächen für Vue hinzu Apr 08, 2025 am 08:51 AM

    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.

    Was bedeutet VUE Multi-Page-Entwicklung? Was bedeutet VUE Multi-Page-Entwicklung? Apr 07, 2025 pm 11:57 PM

    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.

    So verwenden Sie Vue Traversal So verwenden Sie Vue Traversal Apr 07, 2025 pm 11:48 PM

    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.

    Wie man zum Div von Vue springt Wie man zum Div von Vue springt Apr 08, 2025 am 09:18 AM

    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.

    Wie man einen Tag zum Vue springt Wie man einen Tag zum Vue springt Apr 08, 2025 am 09:24 AM

    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.

    React vs. Vue: Welches Framework verwendet Netflix? React vs. Vue: Welches Framework verwendet Netflix? Apr 14, 2025 am 12:19 AM

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

    Was bedeutet der Vue -Komponenten -Wert? Was bedeutet der Vue -Komponenten -Wert? Apr 07, 2025 pm 11:51 PM

    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.