6 écologies pratiques liées à Vue3 (partage de résumé)

Cet article vous aidera à organiser et partager quelques vue pratiques liées à l'écologie, j'espère qu'il sera utile à tout le monde !

1. Bibliothèque de plug-ins Vue

La bibliothèque de plug-ins Vue rassemble les plug-ins Vue les plus récents et les plus complets et fournit des méthodes d'utilisation détaillées de divers plug-ins Vue. Elle prend en charge l'aperçu en ligne et les plug-ins Vue. en téléchargement. (Partage de vidéos d'apprentissage : Tutoriel vidéo Vue)

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

La bibliothèque de plug-ins Vue est conçue pour fournir la dernière version gratuite de Vue pour les applications Web et mobiles. développeurs.js composants et plugins.

2, Pinia

Bibliothèque de gestion d'état légère, la conception de l'API est plus proche de la proposition de Vuex 5, et c'est également la bibliothèque de gestion d'état recommandée par l'équipe principale de Vue, prenant en charge à la fois Vue2 et Vue3.

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

Caractéristiques

Pinia a les fonctionnalités suivantes :

• Intuitif, définissez les composants comme le magasin

• Prise en charge complète de Typescript

• Supprimez les mutations, uniquement l'état, les getters, les actions

• les actions prennent en charge les opérations synchrones et asynchrones

• Vue Devtools prend en charge Pinia, offrant une meilleure expérience de développement

• Capable de créer plusieurs magasins et de réaliser un fractionnement automatique du code

• Extrêmement léger (1 Ko), vous n'avez même pas l'impression qu'il existe

L'utilisation de Pinia peut apporter de nombreux avantages :

• Support des outils de développement

  • Actions de suivi, chronologie des mutations
  • les magasins apparaissent dans les composants qui les utilisent
  • voyage dans le temps et débogage plus facile

• remplacement du module à chaud

  • modifiez votre boutique sans recharger la page
  • dans Maintenez tout état existant pendant le développement

• Plugins : utilisez des plugins pour étendre Fonctionnalité Pinia

• Prise en charge appropriée de TypeScript pour les utilisateurs JS ou complétion automatique

• Prise en charge du rendu côté serveur

3. Modules Nuxt

Créé par l'équipe et la communauté Nuxt. , découvrez notre liste de modules pour enrichir vos projets Nuxt.

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

• Adresse github : https://github.com/nuxt/modules

4, Nuxt 3

Cadre d'application léger pouvant être utilisé pour créer des applications de rendu côté serveur (SSR)

Adresse officielle : https://v3.nuxtjs.org/

Documentation en chinois : https://www.nuxtjs.org.cn/

L'intégration de vite + vue3 + composition api + ts, CLI, DevTools et Nuxt Kit montre qu'il s'agit d'un cadre de développement universel complet qui peut fournir une bonne organisation du code, une efficacité de développement extrêmement élevée, une expérience de développement et un serveur Côté capacités de rendu/génération de sites Web statiques (SSR/SSG), c'est le cœur !

Nouvelles fonctionnalités de Nuxt 3

La reconstruction de Nuxt 3 rationalise le noyau, le rend plus rapide et offre une meilleure expérience de développement.

• Plus léger

  Le déploiement du serveur et la production côté client peuvent être réduits jusqu'à 75 fois en ciblant les navigateurs modernes.

• Plus rapide

  Optimisez les démarrages à froid avec le fractionnement dynamique du code côté serveur, optimisé par nitro.

• Hybride

  La génération statique incrémentielle et d'autres modes avancés sont désormais possibles.

• Suspense

  Obtenez des données de n'importe quel composant avant et après la navigation.

• API Composition

  Utilisez l'API Composition et les composables de Nuxt 3 pour une véritable réutilisabilité.

• Nuxt CLI

  Une nouvelle expérience sans dépendance pour vous aider à créer facilement des projets et des modules intégrés.

• Nuxt Devtools

  Plus d'informations et des correctifs rapides pour travailler efficacement dans le navigateur.

• Nuxt Kit

  Nouveau développement de module basé sur TypeScript et compatible multi-versions.

• Webpack 5

  Des builds plus rapides et des artefacts de build plus petits, sans configuration.

• Vite

  Utilisez Vite comme emballeur pour faire l'expérience d'un HMR léger et rapide.

• Vue3

  Vue3 deviendra une base solide pour votre prochaine candidature.

• TypeScript

  Construit à partir de TypeScript natif et ESM - aucune étape supplémentaire.

5. vuepress

vuepress est un générateur de sites Web statiques basé sur vue qui peut être utilisé pour rédiger des documents.

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

vuepress est un générateur de sites Web statiques piloté par Vue officiellement fourni par Vuejs, qui génère des pages Web basées sur la syntaxe Markdown. En termes simples, il s'agit d'un outil permettant de créer rapidement un site de documentation. Après avoir simplement configuré la fonction, il ne reste plus qu'à écrire chaque document Markdown et à le publier sur github.

Caractéristiques

• Extension de démarque intégrée, optimisée pour la documentation technique

• Capable d'utiliser le code Vue intégré dans les fichiers de démarque

• Système de thème personnalisé piloté par Vue

• Prise en charge de PWA

• Intégration de Google Analytics

• Un thème par défaut :

  • Mise en page réactive

  • Page d'accueil facultative

  • Fonctionnalités de recherche simples, prêtes à l'emploi et basées sur le titre

  • Navigation personnalisable barre et barre latérale

  • Liens GitHub générés automatiquement et liens d'édition de page

6, VueUse

Puissante collection d'utilitaires de composition Vue, il s'agit d'une collection de fonctions utilitaires de composition Vue de base implémentées sur la base de API de composition.

Adresse officielle : https://vueuse.org/

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

VueUse Avec la puissante fonction de vue-demi, vous pouvez simultanément s'appliquer à Vue2 et Vue3 !

Démo Vue 3 :

• Utilisation de vite : https://github.com/vueuse/vueuse-vite-starter

• Utilisation de Webpack : https://github.com/vueuse/vueuse-vue3 -exemple

Démo Vue 2 : Vue CLI

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

De plus, faites attention à la version de la bibliothèque :

À partir de la version v6.0, vue3 nécessite vue >= v3.2 ; vue2 doit dépendre de @vue/composition-api>@vue/composition >= v1.1

【Tutoriels vidéo associés recommandés : Tutoriel d'introduction à vuejs, Démarrer avec Web Front -fin】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!