17 bibliothèques pratiques de composants d'interface utilisateur Vue3 (Web + mobile) à partager

Cela fait presque 2 ans que Vue3 a été officiellement publié. En février de cette année, il est officiellement devenu la version par défaut du projet Vue. Toutes les principales bibliothèques de composants et frameworks ont pris en charge et optimisé Vue 3. Dans cet article, j'en partagerai 17. d'entre eux avec vous. Bibliothèque de composants d'interface utilisateur pratique Vue3, y compris la bibliothèque d'interface utilisateur Web et la bibliothèque d'interface utilisateur mobile, j'espère que cela sera utile à tout le monde !

1. Bibliothèque d'interface utilisateur Web

1. ElementUI Plus

Un ensemble de bibliothèques de composants de bureau basées sur Vue 3.0 pour les développeurs, les concepteurs et les chefs de produit. (Partage de vidéos d'apprentissage : tutoriel vuejs)

Adresse officielle : https://element-plus.org/zh-CN/

2. Implémenter, développer et servir des produits backend au niveau de l'entrepriseAdresse officielle : https://www.antdv.com/docs/vue/introduce-cn

Ant Design Vue est un framework très mature qui utilise Ant Design Création Les interfaces utilisateur avec Vue sont simples et les composants peuvent être adaptés à une variété de styles d'icônes, de polices et de thèmes sombres. Ant Design Vue continue d'améliorer ses plus de 60 composants, couvrant essentiellement la plupart des besoins du projet et les rendant meilleurs et plus faciles d'accès.

Le package Ant Design sur Vue3 est plus petit, semble plus léger et prend en charge SSR (inclut également l'API de composition). Ant Design possède des composants complexes matures tels que des tableaux de données, des boîtes de statistiques, des confirmations contextuelles, des modaux et des fenêtres contextuelles.

3. BalmUI

est basé sur le Material Design de Google, est livré avec des plug-ins et des instructions Vue, ainsi que des composants hautement personnalisables du simple au complexe

Adresse officielle : https://next-material.balmjs .com /

BalmUI est une bibliothèque de composants d'interface utilisateur frontale créée par l'équipe Balm.js (un outil de workflow frontal similaire à Vue CLI). Elle est construite sur la base de la dernière Vue 3. Elle est prête. à utiliser immédiatement, avec une personnalisation et une conception fortes. Le style suit entièrement les spécifications de conception Material Design de Google et constitue une bibliothèque de composants d'interface utilisateur offrant une excellente expérience interactive.

Caractéristiques :

Extrait des effets interactifs et du style visuel des produits intermédiaires et back-end de niveau entreprise, beaux et élégants, avec une excellente expérience des détails

• hors de la boîte. Il ne s'agit pas seulement d'un composant Vue de haute qualité, mais il dispose également d'un grand nombre de plug-ins/instructions/bibliothèques d'outils communs pour appeler

• bibliothèque d'icônes intégrée. Intégrez la dernière bibliothèque d'icônes Material Icons

• Tous les composants et plug-ins sont hautement personnalisables et peuvent être utilisés indépendamment

4 Naive UI

Bibliothèque de composants Tucson Vue3, basée sur Vue 3.0/TypeScript. bibliothèque de composants d'interface utilisateur front-end open source gratuite, documentation complète, projet KPI d'usine non important ! Adresse officielle : https://www.naiveui.com/zh-CN/os-theme

Naive UI est une bibliothèque de composants d'interface utilisateur frontale développée sur la base de la pile technologique relativement nouvelle Vue 3.0/TypeScript. L'auteur est de TuSimple. Il a été initialement maintenu et utilisé en interne pendant deux ans. Il est désormais open source dans la communauté Github. Il est recommandé à tous les amis qui aiment l'open source gratuit.

Caractéristiques :

Les composants sont riches et complets, plus de 70 composants métiers couramment utilisés, supportent l'introduction à la demande

• L'éditeur de thème officiel est fourni, pas besoin de lourdeur, sass, variables css, ni les chargeurs de packs Web, l'utilisation est un système de thème avancé de type sécurisé construit par TypeScript

• Il fonctionne rapidement, est compact et léger, et est spécialement optimisé pour les styles. Tous les composants peuvent être arborescents [1], et ce n'est pas nécessaire. pour importer n'importe quel CSS pour que les composants fonctionnent correctement

5. Arco.design

ByteDance, système de conception de produits au niveau de l'entreprise, prend en charge les versions doubles React et VueAdresse officielle : https://arco. design/

ArcoDesign est basé sur ByteDance Le Byte Design interne de l'entreprise a été mis à niveau après près de 3 ans de peaufinage, il est devenu open source lors de la « Rare Earth Developer Conference 2021 » organisée par les Nuggets grâce à une grande quantité de ressources internes. précipitation et vérification commerciales. Il ne s'agit pas seulement d'une bibliothèque de composants d'interface utilisateur, mais d'un système complet de conception de produits au niveau de l'entreprise.

ArcoDesign résout principalement le problème de la connexion transparente de la conception et du développement de produits pour améliorer la qualité et l'efficacité lors de la création d'applications middle et back-end. Actuellement, ArcoDesign sert principalement à la conception d'expérience et à la mise en œuvre technique des produits milieu et back-end de ByteDance, et est principalement construit et maintenu par les étudiants en conception et développement de l'UED.

Points forts :

• Fournir des spécifications et des ressources de conception systématiques et complètes, couvrant la conception du produit, la conception de l'interface utilisateur et le post-développement

• Support de synchronisation React et Vue. Deux ensembles de bibliothèques de composants d'interface utilisateur, React et Vue, sont également fournis. La bibliothèque de composants Vue est développée sur la base de Vue 3.0

• Prend en charge l'activation du mode sombre en un seul clic et la commutation transparente

• Fournit les meilleures pratiques Arco Pro et organise des scénarios de page courants pour aider les utilisateurs à initialiser rapidement des projets et à utiliser des modèles de page. . Créez des applications mid-end et back-end de 0 à 1

6. Quasar

Construisez facilement une interface utilisateur Vue.js 3 hautes performances et de haute qualité, facile à utiliser, mais pas de chinois. documentation

Adresse officielle : https://quasar.dev/

Quasar est un framework complet axé sur les performances qui permet de créer des interfaces utilisateur Vue (SPA, PWA, SSR, mobile et bureau en plus de Vue). , Node et Webpack, Quasar Sont également inclus Cordova, Capacitor et Electron, qui aident à créer des expériences de bureau et mobiles sans avoir à les apprendre séparément.

7. Bibliothèque de composants d'interface utilisateur iDUX pour Vue3

Un système de conception au niveau de l'entreprise développé par l'équipe commerciale de Tencent en train de servir l'entreprise

Adresse officielle : https://tdesign.tencent.com/

Documents de développement : https://tdesign.tencent.com/vue-next /overview

9 PrimeVue

Composant d'interface utilisateur Vue facile à utiliser, multifonctionnel et hautes performances. bibliothèque

Adresse officielle : https://www.primefaces.org/primevue/

Basée sur la bibliothèque de composants d'interface utilisateur frontale open source gratuite et hautement personnalisable de Vue 3, c'est une excellente bibliothèque de composants d'interface utilisateur frontale de l'étranger. très unique et mérite d'être étudié, appris et commencé.

PrimeVue est un très excellent ensemble de bibliothèques de composants Vue UI, qui prend en charge la bibliothèque de composants Vue 3 Web UI. Il possède des composants riches, une forte personnalisation, une documentation de site Web officielle claire, des exemples de code suffisants et la langue chinoise est également très. good. , est une bibliothèque de composants Vue hautement utilisable.
10. DevUI

Composants d'interface utilisateur de Huawei conçus sur la base de Vue3 et DevUI

Adresse officielle : https://vue-devui.github.io/

11 vuestic-ui . Bibliothèque d'interface utilisateur gratuite et open source de Vue 3, l'interface utilisateur est très belle et une interface de gestion backend est disponible.

Adresse officielle : https://vuestic.dev/

Vuestic UI est un ensemble de bibliothèques de composants de développement Web basées sur Vue.js développées par l'équipe Epicmax. La version Vue3 a été récemment mise à jour et publiée. Vue.js. Expertise dans la meilleure façon de créer un outil open source hautement utilisable et complet. Peu de temps après sa sortie, Vuestic UI est devenue l'une des bibliothèques de composants les plus populaires construites avec Vue.

L'équipe Epicmax de Vuestic UI est l'une des 15 meilleures équipes de développement Vue.js au monde. La conception réactive permet à ces composants non seulement d'être utilisés dans des projets Web PC, mais également de s'adapter à presque toutes les résolutions de taille d'écran. La convivialité du clavier est une fonctionnalité de Vuestic qui fournit une prise en charge transparente du clavier dans tout le framework. Caractéristiques techniques :

Compatible avec Vue3, 52 superbes composants réactifs intégrés, riches en fonctions

Prise en charge de la navigation au clavier, expérience fluide, ce qui est rare dans les bibliothèques de composants populaires

Prise en charge globale configuration des composants via des fichiers de configuration et des variables CSS

2 ensembles de thèmes de couleurs intégrés

• Prise en charge de l'optimisation du tremblement d'arbre pour réduire le volume d'emballage

• Prise en charge de l'internationalisation i18n

• Compatible avec non-IE navigateurs
• 12. Headless UI

• Un composant d'interface utilisateur totalement sans style et entièrement accessible conçu pour s'intégrer parfaitement à Tailwind CSS.
  Adresse officielle : https://headlessui.com/

• 13. View UI Plus

  Une bibliothèque de composants d'interface utilisateur au niveau de l'entreprise et une solution frontale basée sur Vue.js 3

  Adresse officielle : https://www.iviewui.com/

  

  View UI Plus Il s'agit d'un ensemble de bibliothèques de composants d'interface utilisateur basées sur Vue.js 3 dans le système de conception View Design. Il est principalement utilisé pour les systèmes intermédiaires et back-end au niveau de l'entreprise.

  2. Bibliothèque d'interface utilisateur mobile

  14.               Vant

  Vant est une bibliothèque de composants mobiles légère et fiable qui a été open source en 2017.

  Adresse officielle : https://vant-contrib.gitee.io/vant/#/zh-CN/

  

  Caractéristiques

  • Excellentes performances, la taille moyenne des composants est inférieure à 1 Ko (min +gzip )

  • 70+ composants de haute qualité, couvrant les scénarios mobiles grand public

  • Zéro dépendance externe, pas de packages npm tiers

  • Écrit en TypeScript, fournissant des définitions de type complètes

  • Test unitaire couverture Le taux dépasse 90%, offrant une garantie de stabilité

  • Fournir de riches documents en chinois et en anglais et des exemples de composants

  • Fournir des ressources de conception Sketch et Axure

  • Prise en charge des applets Vue 2, Vue 3 et WeChat

  • Prise en charge de la personnalisation du thème, plus de 700 variables de thème intégrées

  • Prise en charge de l'introduction à la demande et du Tree Shaking

  • Prise en charge de l'accessibilité (en amélioration continue)

  • Prise en charge du mode sombre (pris en charge à partir de Vant 4)

  • Prend en charge le rendu côté serveur

  • Prend en charge l'internationalisation, plus de 20 packages de langues intégrés

  15 ​​NutUI

  NutUI est une bibliothèque de composants mobiles Vue de style JD, développée et servie par An. produit de niveau entreprise avec une interface Web mobile.

  Adresse officielle : https://nutui.jd.com/#/

  

  Caractéristiques de la nouvelle version de NutUI 3.0

  • 70+ composants de haute qualité (20+ de plus que l'ancienne version)

  • basé sur la spécification visuelle JD APP 9.0 (l'ancienne version est basée sur JD APP 7.0)

  • prend également en charge la citation à la demande

  • une documentation et des exemples plus détaillés

  • prend en charge TypeScript

  • prend en charge rendu côté serveur (convivial pour les besoins de référencement) )

  • Prend en charge les thèmes personnalisés

  • Couverture des tests unitaires

  16. Recommandé par You Yuxi et mérite une attention particulière. Adresse officielle : https://varlet.gitee.io/varlet-ui/#/zh-CN/home

  Caractéristiques techniques de Varlet :

  Fournit 50 composants communs légers et de haute qualité

  • sont développés par des Chinois et fournissent une documentation complète en chinois/anglais

  • Prise en charge de l'introduction à la demande et de la personnalisation du thème, prise en charge du mode sombre

  • Prise en charge de l'internationalisation

  • Prise en charge du webstorm, de l'éditeur vscode Mise en évidence des attributs des composants

  • Supporte le rendu côté serveur SSR

  • Support Typescript

  • Assurer une couverture de tests unitaires de plus de 90%

  17.
  Propulsé par JD NutUI Une bibliothèque de composants de loterie basée sur NutUI + Vue. 3 produit par l'équipe front-end, utilisé pour développer rapidement un gameplay de loterie pour des activités marketing et des scénarios de mini-jeux.

  Adresse officielle : https://nutui.jd.com/bingo/#/

  Caractéristiques techniques des composants de loterie

  

  Contient un total de 12 composants de loterie
  Conception d'interface utilisateur basée sur JD.com APP 10.0 Spécifications visuelles

  • Le site Web officiel fournit une documentation détaillée et suffisamment d'exemples de code

  • Basé sur Vue 3.0, prend également en charge TypeScript, prend en charge l'introduction à la demande

  • Paramètres personnalisés pratiques et flexibles
  couvre 12 types de composants de loterie communs

  Loterie à grande roue TurnTable
  Loterie Marquee Marquee

  • SquareNine Loterie à neuf carrés

  • ScratchCard Carte à gratter loterie

  • GiftBox Coffret cadeau mystérieux

  • Lottoroll Machine de loterie

  • hiteggs Golden Egg Smashing

  • giftrain Red Packet Rain

  • luckshake Shake

  • dollmachine Doll Machine

  • ShakeDice

  • GuessGift Tu te caches et je suppose

  (Partage de vidéos d'apprentissage : développement web front-end, Introduction à la programmation)

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!