6 praktische Vue3-bezogene Ökologie (zusammenfassende Weitergabe)

Dieser Artikel hilft Ihnen beim Organisieren und Teilen praktischer vue-bezogener Ökologie. Ich hoffe, dass er für alle hilfreich ist!

1. Vue-Plug-In-Bibliothek

Die Vue-Plug-In-Bibliothek sammelt die neuesten und umfassendsten Vue-Plug-Ins und bietet detaillierte Verwendungsmethoden für verschiedene Vue-Plug-Ins. im Download. (Teilen von Lernvideos: vue-Video-Tutorial)

Offizielle Adresse: https://www.vue365.cn/

Die Vue-Plug-in-Bibliothek wurde entwickelt, um das neueste kostenlose Vue für Web- und Mobilanwendungen bereitzustellen Entwickler. js-Komponenten und Plugins. 2, Pinia

Offizielle Adresse: https://pinia.vuejs.org/

Funktionen

Pinia verfügt über die folgenden Funktionen:

Intuitiv, definieren Sie den Store wie Komponenten

Vollständige Typescript-Unterstützung

• Mutationen, nur Status, Getter, Aktionen entfernen

• Aktionen unterstützen synchrone und asynchrone

• Vue Devtools unterstützt Pinia und bietet so ein besseres Entwicklungserlebnis

• Möglichkeit zum Aufbau mehrerer Stores und zur Realisierung einer automatischen Codeaufteilung

• extremely Lightweight (1 KB), Sie haben nicht einmal das Gefühl, dass es sich an Pinia kann viele Vorteile erzielen:

• Development Tool Support

• überträgt. in Komponenten, die sie verwenden

Zeitreise und einfacheres Debuggen

Austausch von Hot-Modulen

• Ändern Sie Ihren Shop, ohne die Seite neu zu laden

  in Behalten Sie alle vorhandenen Zustände während der Entwicklung bei
  • Plugins: Verwenden Sie Plugins zum Erweitern Pinia-Funktionalität
• Richtige TypeScript-Unterstützung für JS-Benutzer oder

  Autovervollständigung

  • Serverseitige Rendering-Unterstützung

• 3. Nuxt-Module

• Erstellt vom Nuxt-Team und der Community, Erfahren Sie mehr über unsere Liste der Module zur Erweiterung Ihrer Nuxt-Projekte.

• Offizielle Adresse: https://modules.nuxtjs.org/

Github-Adresse: https://github.com/nuxt/modules

4, Nuxt 3

• Leichtes Anwendungsframework, das zum Erstellen von serverseitigen Rendering-Anwendungen (SSR) verwendet werden kann
• Offizielle Adresse: https://v3.nuxtjs.org/
  Chinesische Dokumentation: https://www.nuxtjs.org.cn/

Die Integration von Vite + Vue3 + Composition API + TS, CLI, DevTools und Nuxt Kit zeigt, dass es sich um ein vollständiges universelles Entwicklungsframework handelt, das eine gute Codeorganisation, extrem hohe Entwicklungseffizienz, Entwicklungserfahrung und Server bieten kann Side-Rendering/statische Website-Generierung (SSR/SSG)-Funktionen, das ist der Kern!

Neue Funktionen von Nuxt 3

Die Rekonstruktion von Nuxt 3 rationalisiert den Kernel, macht ihn schneller und sorgt für ein besseres Entwicklungserlebnis.

Leichter

Serverbereitstellung und clientseitige Produktion können bei Verwendung moderner Browser um das bis zu 75-fache reduziert werden.

Schneller

Optimieren Sie Kaltstarts mit dynamischer serverseitiger Codeaufteilung, unterstützt von Nitro.

Hybrid

• Inkrementelle statische Generierung und andere erweiterte Modi sind jetzt möglich.
  Spannung
• Erhalten Sie Daten von jeder Komponente vor und nach der Navigation.
  Composition API
• Verwenden Sie die Composition API und die Composables von Nuxt 3 für echte Wiederverwendbarkeit.
  Nuxt CLI
• Eine neue Erfahrung ohne Abhängigkeiten, die Ihnen beim einfachen Erstellen von Projekten und integrierten Modulen hilft.
  Nuxt Devtools
• Weitere Informationen und schnelle Lösungen für effizientes Arbeiten im Browser.
  Nuxt Kit
• Neue Modulentwicklung basierend auf TypeScript und versionübergreifend kompatibel.
  Webpack 5
• Schnellere Builds und kleinere Build-Artefakte, ohne Konfiguration.
  Vite
• Verwenden Sie Vite als Ihren Packager, um leichtes und schnelles HMR zu erleben.
  Vue3
• Vue3 wird eine solide Grundlage für Ihre nächste Bewerbung sein.
  TypeScript
• Erstellt aus nativem TypeScript und ESM – keine zusätzlichen Schritte.

• 5. vuepress
  vuepress ist ein statischer Website-Generator auf Basis von Vue, der zum Schreiben von Dokumenten verwendet werden kann.

Offizielle Adresse: https://v2.vuepress.vuejs.org/zh/



vuepress ist ein Vue-gesteuerter statischer Website-Generator, der offiziell von Vuejs bereitgestellt wird und Webseiten basierend auf der Markdown-Syntax generiert. Einfach ausgedrückt handelt es sich um ein Tool zum schnellen Erstellen einer Dokumentationsseite. Nach der einfachen Konfiguration der Funktion müssen Sie nur noch jedes Markdown-Dokument schreiben und auf Github veröffentlichen.

Funktionen

• Eingebaute Markdown-Erweiterung, optimiert für technische Dokumentation

• Kann in Markdown-Dateien eingebetteten Vue-Code verwenden

• Vue-gesteuertes benutzerdefiniertes Theme-System

• PWA-Unterstützung

• Google Analytics-Integration

• Ein Standardthema:

  • Responsives Layout

  • Optionale Startseite

  • Einfache, sofort einsatzbereite, titelbasierte Suchfunktionen

  • Anpassbare Navigation Leiste und Seitenleiste

  • Automatisch generierte GitHub-Links und Seitenbearbeitungslinks

6, VueUse

Leistungsstarke Vue-Kompositionsdienstprogramm-Sammlung. Es handelt sich um eine Sammlung grundlegender Vue-Kompositionsdienstprogrammfunktionen, die basierend auf dem implementiert werden Kompositions-API.

Offizielle Adresse: https://vueuse.org/


Github-Adresse: https://github.com/vueuse/vueuse



VueUse Mit der leistungsstarken Funktion von vue-demi können Sie gleichzeitig Gilt für Vue2 und Vue3!

Vue 3 Demo:

• Vite verwenden: https://github.com/vueuse/vueuse-vite-starter

• Webpack verwenden: https://github.com/vueuse/vueuse-vue3 -Beispiel

Vue 2 Demo: Vue CLI

• Verwenden Sie Vue CLI: https://github.com/vueuse/vueuse-vue2-example

Achten Sie außerdem auf die Version der Bibliothek:

Ab Version v6.0 erfordert vue3 vue >= v3.2; vue2 muss abhängig sein von @vue/composition-api>@vue/composition >= v1.1

【Empfohlene verwandte Video-Tutorials: vuejs Einführungs-Tutorial, Erste Schritte mit Webfront -Ende】

Das obige ist der detaillierte Inhalt von6 praktische Vue3-bezogene Ökologie (zusammenfassende Weitergabe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!