[Organisation de l'hématémèse] Plus de 40 outils pratiques Vue3 partagés

Cela fait presque 2 ans que Vue3 est officiellement sorti, et il est officiellement devenu la version par défaut du projet Vue en février de cette année. L'article suivant résume 40 outils pratiques, bibliothèques d'interface utilisateur, plug-ins et écologie de Vue3 à partager avec vous. J'espère qu'il sera utile à tout le monde.

1. Bibliothèque de composants d'interface utilisateur Vue3

La bibliothèque de composants d'interface utilisateur peut être comprise comme une collection d'éléments de conception d'interface réutilisés. La bibliothèque de composants d'interface utilisateur joue le rôle de connexion comportementale dans l'ensemble du système, constitue la collaboration horizontale entre les concepteurs et les développeurs au sein de l'équipe et constitue la base normative pour garantir une sortie de produit cohérente. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

Ici, nous avons compilé 17 bibliothèques de composants d'interface utilisateur Vue3, dont 13 bibliothèques d'interface utilisateur Web et 4 bibliothèques d'interface utilisateur mobile. Lisez l'article "17 bibliothèques de composants d'interface utilisateur pratiques Vue3 (Web + Mobile). Partagez》pour l'obtenir.

Bibliothèque d'interface utilisateur Web

• ElementUI Plus : une bibliothèque de composants pour les concepteurs et les développeurs

• Ant Design of Vue : Vue d'Ant Design implémente, développe et sert des produits backend au niveau de l'entreprise

• BalmUI : UI bibliothèque de composants conçue sur la base de Material Design de Google

• Naive UI : bibliothèque de composants d'interface utilisateur frontale open source gratuite basée sur Vue 3.0/TypeScript

• arco.design : système de conception de produits au niveau de l'entreprise Bytedance, prend en charge React et Vue version dual

• Quasar : un framework complet et axé sur la performance

• . . . "Bibliothèque d'interface utilisateur mobile" -bingo : Bibliothèque de composants de loterie de Jingdong basée sur NutUI

2, outils de développement pratiques Vue3

• Dans l'article précédent "

  7 outils de développement pratiques Vue3 qui valent la peine d'être collectés (partagés)
", nous avons présenté 7 outils de développement pratiques Vue3 :
unplugin-vue-components : importer automatiquement des plug-ins pour les composants à la demande
vuex-persistedstate : plug-in de persistance Vuex
vuex-persist : prise en charge du plugin de persistance Typescript Vuex

@vueuse/gesture : Bibliothèque de gestes pour rendre les applications interactives

unplugin-auto-import

pinia-plugin-persistedstate : Stockage de persistance des données Pinia
vue-termui.dev : Un framework d'interface utilisateur de terminal basé sur Vue.js

• 3, outil de visualisation Vue3

• Avec les mises à jour fréquentes de la technologie, les outils de développement visuel sont devenus un outil efficace pour améliorer l'efficacité du développement. Dans l'article précédent "

  [Conclusion] 4 outils de visualisation Vue3
", nous avons présenté 4 outils de visualisation Vue3 :
Pdfvuer : une visionneuse PDF pour les applications Vue
vue3- marquee : composant de défilement transparent
Vue-ECharts : composant Vue.js de Baidu ECharts

iconpark : une bibliothèque d'icônes open source qui gère les styles d'icônes vectorielles grâce à la technologie

4. Plug-ins Vue3 couramment utilisés

• Dans le précédent. article "

  10 plugins Vue3 couramment utilisés pour améliorer l'efficacité du développement (venez et collectez)
", nous avons découvert 10 plug-ins Vue qui aident à améliorer l'efficacité :
vue-multiselect-next : Universal selection/multi-select/ composant mark pour Vue
vue-print-nb : wrapper d'instructions
vue-i18n-next : plug-in international pour Vue3

vue-cropper : plug-in de recadrage d'image vue

Vue Grid Layout : système de disposition de grille de Vue

Vue Qrcode Reader : un ensemble de composants Vue.js pour détecter et décoder les codes QR (code QR)
Makeit Captcha : plug-in de code de vérification Slide Block
vue3-clipboard : plug-in de collage et de copie basé sur Vue3
vue.draggable Le composant glisser-déposer de Vue 3 basé sur Sortable.js
BetterScroll résout divers problèmes côté mobile (le PC a été pris en charge) Plug-ins requis pour le défilement des scènes

• 5, écologie liée à Vue3

• Dans l'article précédent "

  6 Écologie pratique liée à Vue3 (partage de résumé)
", nous avons découvert 6 écologies liées à Vue3 :
Bibliothèque de plug-ins Vue (vue365.cn)
Pinia : bibliothèque légère de gestion d'état
Modules Nuxt

Nuxt 3 : peut être utilisé pour créer des applications de rendu côté serveur (SSR)

vuepress : générateur de sites Web statiques alimenté par Vue

VueUse : une collection de fonctions utilitaires de composition Vue de base

6, plug-in d'animation Vue3

1) vue-starport

Composants partagés de routage croisé avec animation

adresse github : https ://github.com/antfu/vue-starport/blob/main/README.zh-Hans.md

Adresse de démonstration : https://vue-starport.netlify.app/

2 ) @vueuse/motion

Vue Composables fait bouger vos composants

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

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

7. Composants audio et vidéo

@vueuse/sound

Combinaison Vue pour jouer des effets sonores

Adresse officielle : https://sound.vueuse.org/

Adresse github : https:// github.com/VueUse/sound

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