Quels frameworks peuvent être utilisés pour vue ?

Vue peut utiliser les frameworks suivants : 1. Ant Design Vue est un framework très mature et il est très simple de créer une interface utilisateur en l'utilisant ; 2. BalmUI est une bibliothèque de composants d'interface utilisateur avec une excellente expérience interactive ; Il s'agit d'un framework de composants d'interface utilisateur réactif, accessible et convivial ; 4. Vuestic, qui fournit plus de 50 composants avec des fonctions uniques et une configurabilité étendue ; 5. Element, qui est une bibliothèque de composants de bureau ; -cadre ciblé.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Vue est une bibliothèque MVVM légère, hautes performances et composable avec une API simple et claire, ce qui facilite le démarrage. Depuis son lancement, Vue a été reconnu par de nombreux développeurs web.

Dans le développement de projets Web front-end de l'entreprise, plusieurs projets sont développés à l'aide du cadre de composants d'interface utilisateur basé sur Vue et mis en service officiel.

Après avoir utilisé le framework Vue.js et la bibliothèque de composants d'interface utilisateur, l'équipe de développement a considérablement amélioré son efficacité de développement, écrit moins de code et de nombreux composants d'effets d'interface ont été encapsulés.

Dans le processus de sélection de la bibliothèque de composants Vue UI, nous avons également collecté et compilé d'excellentes bibliothèques de composants Vue UI en fonction de facteurs tels que le nombre d'étoiles, la richesse des documents, la fréquence des mises à jour et la maintenance sur GitHub.

Frameworks pouvant être utilisés avec vue

1 iView

iView est un ensemble de bibliothèques de composants d'interface utilisateur open source basées sur Vue.js, qui sert principalement les produits middle et back-end des interfaces PC. . Les composants d'iView sont relativement complets, mis à jour rapidement et la documentation est très détaillée. Il est maintenu par l'équipe de l'entreprise et constitue un cadre de composants Vue UI relativement fiable. L'écosystème iView se porte également très bien, et il existe également un iView Admin open source, ce qui est très pratique pour le travail backend. Selon le site officiel, iView a été utilisé dans les produits de grandes entreprises telles que TalkingData, Alibaba, Baidu, Tencent, Toutiao, JD.com, Didi Chuxing, Meituan, Sina, Lenovo et d'autres grandes entreprises.

Site officiel d'iView : https://www.iviewui.com/

2 Vux

Vux est une bibliothèque de composants d'interface utilisateur mobile développée sur la base de WeUI et Vue2.x, servant principalement les pages WeChat. Le positionnement de Vux a été très clair. L'un est : la bibliothèque de composants d'interface utilisateur mobile Vue, et l'autre est : la bibliothèque de styles de base de WeUI. Les composants de Vux couvrent tout le contenu WeUI et étendent également certains composants couramment utilisés. Par exemple : Sticky, timeline, v-chart, XCircle. Vux est entretenu personnellement. Mais l’étoile sur GitHub est toujours très haute, atteignant 13k. J'ai vu que le problème était résolu très rapidement sur GitHub. L'utilisation des composants de base et les effets du document Vux sont expliqués sur place. De nombreux cas d'utilisation de Vux sont également affichés sur le site officiel de Vux. Dans le développement des pages WeChat, il n'y a fondamentalement pas trop de bugs et le développement est relativement fluide.

Site officiel de Vux : https://vux.li/

3 Element

Element, un ensemble de bibliothèques de composants de bureau basées sur Vue 2.0 pour les développeurs, les concepteurs et les chefs de produit. Element est une bibliothèque de composants Vue UI maintenue par l'open source front-end d'Ele.me. La fréquence de mise à jour est toujours très élevée et une nouvelle version sera publiée pratiquement chaque semaine à un demi-mois. Les composants sont complets et couvrent essentiellement tous les composants requis par le backend. La documentation explique en détail et contient de nombreux exemples. Je ne l'ai jamais utilisé en pratique. Il existe de nombreux tutoriels et articles Element sur Internet. L'élément doit être une bibliothèque de composants Vue UI de relativement haute qualité.

Site officiel d'Element : http://element.eleme.io/#/zh-CN

Element+ est devenu célèbre dans Vue2 Element+ apporte un grand nombre de composants discrets à Vue3, créant une application très complexe. La plupart du contenu. requis pour le programme a déjà été produit et est disponible pour utilisation. Element+ fournit des composants matures de sélecteur de date et d’heure, d’arborescence, de chronologie et de calendrier.

Element+ fournit même les plus petits widgets dont un développeur pourrait avoir besoin lors de la création d'interfaces utilisateur, depuis de simples animations jusqu'à un système d'internationalisation à l'échelle du framework qui peut être associé à i18n pour créer des traductions personnalisées ou même ajouter un langage non intégré. .

Element+ compte plus de 11,1 000 étoiles sur GitHub et est en train de devenir l'un des frameworks d'interface utilisateur Vue3 les plus populaires sur Github. Il atteint les normes de développement avec une excellente gestion des problèmes, des mises à jour rapides, des composants enfichables et une personnalisation élevée grâce aux variables SCSS.

4. Mint

Mint UI est basé sur la bibliothèque de composants mobiles Vue.js, qui est également dérivée du projet frontal Ele.me. Mint UI consiste véritablement à charger des composants à la demande. Vous pouvez charger uniquement les composants déclarés et leurs fichiers de style. Mint UI utilise CSS3 pour gérer diverses animations afin d'éviter les redessins et redistributions inutiles du navigateur, permettant aux utilisateurs d'avoir une expérience fluide et fluide. De nombreux didacticiels vidéo sur Internet sont basés sur Mint UI. Il est très pratique de développer des projets Web mobiles et la documentation est également très concise et claire. De nombreux composants de l'interface utilisateur de Mint ont été encapsulés. Vous pouvez essentiellement les écrire selon les exemples et les implémenter avec des ajustements simples. Cependant, la dernière soumission de code sur GitHub remonte au 16 janvier 2018. Je ne sais pas si le projet est relativement stable et n'a pas été mis à jour, ou si le projet risque d'être abandonné.

Site officiel de Mint UI : http://mint-ui.github.io/#!/zh-cn

5, Bootstrap-Vue

Bootstrap-VUE fournit l'implémentation des composants Bootstrap V4 et du système de grille basé sur vue2, complétant ainsi un balisage d'accessibilité WAI ARA étendu et automatisé. Bootstrap 4 est la dernière version par rapport à Bootstrap 3, il possède des classes plus spécifiques et transforme certaines parties associées en composants associés. Dans le même temps, la taille de Bootstrap.min.css a été réduite de plus de 40 %. Bootstrap4 a abandonné la prise en charge d'IE8 et d'iOS 6 et ne prend désormais en charge que les navigateurs IE9 et supérieurs et iOS 7 et supérieurs. À l’époque où les sites Web réactifs sont devenus populaires, Bootstrap était le framework le plus populaire au monde pour créer des sites Web axés sur les mobiles. On peut dire que Bootstrap était populaire dans le monde entier. Même aujourd’hui, de nombreux sites Web d’entreprise sont réactifs grâce à Bootstrap. Bootstrap-Vue vous permet d'obtenir des effets Bootstrap dans Vue.

Site officiel de Bootstrap-Vue : https://bootstrap-vue.js.org/

6 Ant Design Vue

Ant Design Vue est l'implémentation Vue d'Ant Design 3.X, développée et utilisée en entreprise. produit backends de niveau supérieur. Plusieurs composants Ant Design Vue peuvent être trouvés sur GitHub. Cependant, en comparaison, Ant Design Vue est meilleur. Ant Design Vue partage le système d'outils de conception Ant Design of React, implémente tous les composants Ant Design of React et prend en charge les navigateurs modernes et IE9 et versions ultérieures (nécessite des polyfills). Il permet à ceux qui connaissent Ant Design de démarrer facilement avec Vue.

Site officiel d'Ant Design Vue : https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

Ant Design Vue est un framework très mature qui utilise Ant Design Vue pour créer des utilisateurs interfaces Très simples, ces composants peuvent être adaptés à différents styles d'icônes, polices et thèmes noirs. 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.

7, AT-UI

AT-UI est une bibliothèque de composants d'interface utilisateur front-end basée sur Vue.js 2.0. Elle est principalement utilisée pour développer rapidement des produits middle et back-end pour les sites Web PC. prend en charge les navigateurs modernes et IE9 et versions ultérieures. AT-UI est plus rationalisé et implémente les composants couramment utilisés en arrière-plan.

Site officiel d'AT_UI : https://at-ui.github.io/at-ui/#/zh

8, Vant

Vant est une bibliothèque de composants Vue mobile légère et fiable. Vant est open source par l'équipe Youzan et est principalement maintenu par l'équipe Youzan. Vant Weapp est une version mini-programme de Vant, une bibliothèque de composants mobiles de Youzan. Les deux sont basés sur les mêmes spécifications visuelles et fournissent des interfaces API cohérentes pour aider les développeurs à créer rapidement des mini-applications. Jusqu’à présent, Vant dispose de plus de 50 composants open source qui ont été testés par l’activité en ligne de Youzan. Par exemple : modification d'adresse AddressEdit, liste d'adresses AddressList, sélection de la province et de la ville, carte, personne de contact, coupon de coupon, point d'action de la page produit GoodsAction, colonne d'ordre de soumission SubmitBar, couche contextuelle de spécification de produit Sku. Si vous construisez un centre commercial et que vous ne vous souciez pas beaucoup de l'interface et de la mise en œuvre de la logique métier, vous pouvez développer rapidement à l'aide de la bibliothèque de composants Vant.

Site officiel de Vant : https://youzan.github.io/vant/#/zh-CN/intro

9, cube-ui

cube-ui est une bibliothèque de composants mobiles exquise basée sur Vue.js . Il est rationalisé et affiné à partir de la bibliothèque de composants interne de Didi et a fait l'objet de plus d'un an de tests commerciaux. Chaque composant dispose de suffisamment de tests unitaires pour garantir une intégration ultérieure. Poursuivez le summum de l’expérience interactive. Suivez les normes d'interaction de conception unifiées pour restaurer fortement l'effet de conception ; l'interface est standardisée et l'utilisation est unifiée et standardisée, ce qui rend le développement plus simple et plus efficace. Il prend en charge l'introduction et la post-compilation à la demande, est léger et flexible ; a une forte évolutivité et peut facilement mettre en œuvre un développement secondaire basé sur les composants existants.

site officiel de cube-ui : https://didi.github.io/cube-ui/#/zh-CN

10, Muse-UI

Muse-UI est basé sur l'élégante interface utilisateur de conception matérielle de Vue 2.0 bibliothèque de composants . Muse UI dispose de plus de 40 composants d'interface utilisateur pour s'adapter à différents environnements commerciaux. L’interface utilisateur de Muse ne nécessite qu’une petite quantité de code pour terminer le remplacement du style de thème. Muse UI peut être utilisé pour développer des applications complexes d'une seule page

Site officiel de Muse-UI : https://muse-ui.org/#/zh-CN

11, N3-components

La bibliothèque de composants N3 est basé sur Vue. js, permettant aux ingénieurs front-end et aux ingénieurs full-stack de créer rapidement des pages et des applications. Les composants N3 contiennent plus de 60 composants, une liste de composants, des styles personnalisés, prennent en charge plusieurs paradigmes de modélisation (UMD) et sont développés à l'aide d'ES6.

Site officiel de N3 : https://n3-components.github.io/N3-components/component.html

12, Mand Mobile

Mand Mobile est une bibliothèque de composants d'interface utilisateur mobile Vue pour des scénarios financiers, riches et Des produits financiers flexibles, pratiques et rapides à créer de haute qualité, simplifiant les scénarios financiers complexes. Mand Mobile contient des composants riches et plus de 30 composants de base, couvrant des scénarios financiers. Les composants extrêmement faciles à utiliser disposent tous d'une documentation détaillée et de démonstrations de cas. Il s'appuie sur la technologie la plus avancée, implémente la modularisation et la légèreté, prend en compte la stabilité. et de qualité, et s'efforce d'atteindre une couverture complète des scénarios financiers.

Site officiel de Mand Mobile : https://didi.github.io/mand-mobile/#/zh-CN/home

13, we-vue

we-vue est une bibliothèque de composants mobiles basée sur Vue.js. Combinée avec la bibliothèque de styles weui.css, elle encapsule une série de composants et est très adaptée au développement mobile tel que les comptes publics WeChat. we-vue contient plus de 35 composants, la couverture des tests unitaires dépasse 98 %, prend en charge l'importation de plugins babel, une documentation en ligne complète et des exemples en ligne détaillés.

site officiel de we-vue : https://wevue.org/

14 veui

veui est une bibliothèque de composants d'interface utilisateur Vue au niveau de l'entreprise développée par l'équipe Baidu EFE. Il n'y a actuellement aucune documentation, seulement une démo.

On dit que c'est un travail en cours sur GitHub. Alors attendons patiemment.

Site officiel de veui : https://ecomfe.github.io/veui/components/#/

15, Semantic-UI-Vue

Semantic-UI-Vue est basé sur Vue.js pour le Semantic- Le cadre d'interface utilisateur est accompli.

Semantic est un cadre de développement qui aide les développeurs à créer des mises en page réactives élégantes à l'aide d'un langage HTML convivial. Semantic-UI-Vue fournit une API similaire à Semantic-UI et un ensemble de thèmes personnalisables.

Site officiel de Semantic-UI-Vue : https://semantic-ui-vue.github.io/#/

Lors du choix d'un framework, vous devez le choisir en fonction de la situation réelle du développement Web et de la familiarité de l'équipe . Une bonne bibliothèque de composants d'interface utilisateur est très importante pour un projet Web

16.Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs.com/zh-Hans

Vuetify est entièrement basé sur Material Design Standardiser le développement. Chaque composant est fabriqué à la main, apportant les meilleurs outils d'interface utilisateur à votre prochaine grande application. Le développement ne s'arrête pas aux composants principaux de la spécification Google. Grâce au soutien des membres de la communauté et des sponsors, davantage de composants seront conçus et mis à la disposition de tous.

Il s'agit principalement d'un composant vue ui qui est plus populaire dans les pays étrangers. Il a diverses fonctions et est traduit en chinois, mais certains sont en anglais et la traduction n'est pas très bonne PS : la plupart des composants d'interface utilisateur nationaux n'ont que des fonctionnalités. une partie d'entre eux. De nombreux tableaux de navigation principale, de navigation inférieure, de liste et de grille couramment utilisés ne sont pas disponibles.

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 et est prête. à utiliser immédiatement et personnalisé. Fort, le style de conception suit entièrement les spécifications de conception Material Design de Google et il s'agit d'une bibliothèque de composants d'interface utilisateur avec une excellente expérience interactive.

BalmUI a publié sa version 9.0, qui prend en charge Vue3. Balm est basé sur le Material Design de Google, c'est pourquoi il semble familier. Balm est livré avec des plugins et des directives Vue, ainsi que des composants hautement personnalisables allant du simple au complexe.

Site officiel de BalmUI : https://next-material.balmjs.com/#/

BalmUI se développe très rapidement. Si vous souhaitez utiliser le style Material Design, utilisez des instructions intégrées complexes (telles que l'anti-rebond et l'ondulation de l'interface utilisateur). ) pour créer des composants personnalisés. Si cela s'avère utile, alors il convient très bien aux projets Vue3.

Wave UI est un cadre de composants d'interface utilisateur réactif, personnalisable, accessible et convivial qui comprend plus de 40 composants d'interface utilisateur et est compatible avec Vue 3 et Vue 2.

WaveUI est bien positionné après la sortie de Vue3. Le développement de WaveUI a commencé alors que Vue3 était encore en phase alpha. L'objectif est de prendre en charge son API dès qu'elle est stable, ce qui en fait l'un des premiers frameworks d'interface utilisateur Vue3. .

Site Web officiel : https://antoniandre.github.io/wave-ui/

WaveUI propose plus de 40 composants magnifiques et réactifs qui vont des filateurs aux calendriers, et tout le reste. WaveUI offre également des fonctionnalités utilitaires, personnalisables et sophistiquées de validation de formulaire intégrées.

Les composants fournis par WaveUI sont très beaux, les effets d'animation sont également très bons et son style est cohérent dans tout le framework. Un excellent choix pour les applications Vue3 réactives de niveau entreprise.

Vuestic est l'un des plus beaux panneaux de gestion open source pour Vue. Il est bon pour écrire du code Vue maintenable et créer des composants et des interfaces flexibles.

Site Web officiel : https://vuestic.dev/

L'équipe a récemment publié la version Vue3 de Vuestic, qui comprend la populaire interface utilisateur Vuestic Admin et d'autres composants. Vuestic met en avant sa prise en charge prête à l'emploi de la navigation au clavier, une fonctionnalité populaire parmi la communauté front-end en raison de l'expérience utilisateur qu'elle offre.

Vuestic propose plus de 50 composants dotés de fonctionnalités uniques et d'une configurabilité étendue, conçus de manière réactive pour fonctionner avec pratiquement toutes les résolutions d'écran. Vuestic fournit une prise en charge transparente de la traduction et une accessibilité au clavier dans tout le framework.

Vuestic s'est imposé comme l'un des plus beaux frameworks d'interface utilisateur Vue3 avec son magnifique catalogue de composants. Ils accélèrent désormais le rythme pour créer des composants plus complexes, tels que des sélecteurs de dates ou des tableaux de données, qui seront certainement aussi créatifs que leurs produits actuels.

Site officiel : https://ionicframework.com/docs/vue/overview

Ionic est l'un des premiers frameworks d'interface utilisateur à fournir le support de Vue3. Ionic est plus enclin à l'interface utilisateur mobile, et l'équipe sait comment répondre et maintenir un excellent framework d'interface utilisateur.

Ionic Vue est un framework très mature avec une communauté incroyable, des tonnes de questions StackOverflow, un support d'entreprise et un grand canal Slack avec des membres principaux, ce qui permet d'obtenir facilement de l'aide lorsque vous avez besoin d'aide.

Le framework Ionic Vue compte plus de 45 000 étoiles sur Github et a été utilisé par de nombreuses grandes entreprises, notamment Airbus et Electronic Arts, et l'équipe d'Ionic est connue pour sa capacité à maintenir son framework d'interface utilisateur. C'est un excellent choix maintenant et à l'avenir. .

21, Naive UI

Site officiel : https://www.naiveui.com/zh-CN/os-theme

Naive UI a été publié sur Twitter, puis transmis par le créateur de Vue, donnant ceci nouvelle vie La bibliothèque de composants apporte beaucoup de trafic. Désormais, Naive UI a obtenu 5,1 000 étoiles sur GitHub en moins de trois mois.

Il fournit plus de 70 composants bien conçus qui peuvent être intégrés de manière transparente dans presque tous les types d'applications Vue3. Les composants de Naive ont d'excellentes performances, sont hautement personnalisables et prennent en charge TypeScript, offrant une excellente expérience de développement.

Le site de documentation est facile à naviguer et propose des entrées de personnalisation complètes pour aider les développeurs à prévisualiser l'apparence des composants dans leurs propres thèmes. Vous pouvez utiliser ces options pour créer votre propre thème complet avec des motifs de couleurs et des polices. Ce thème personnalisé peut être téléchargé et facilement ajouté à l'application pour remplacer les valeurs par défaut.

22, Quasar

Site officiel : https://next.quasar.dev/

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

Le framework Quasar semble être basé sur Material Design, mais une fois que vous avez commencé, tout est très personnalisable pour s'adapter à votre propre système de conception.

La prise en charge de Vue3 est également très rapide et Quasar a publié presque tous les composants, plugins et directives v1. De plus, ils ont publié des composants composables pour aider les développeurs à mieux comprendre l'API Quasar.

23, PrimeVUE

Site officiel : https://primefaces.org/primevue/showcase/#/setup

PrimeVUE est également l'un des premiers frameworks à prendre en charge Vue3, et il n'a pas déçu. Avec plus de 80 composants, PrimeVUE se révèle être l'un des frameworks proposant la plus large gamme de composants de cette liste.

Les composants incluent des formulaires de mot de passe avec des jauges, des curseurs, des arbres, des graphiques, des boutons partagés, des boutons, des graphiques et bien plus encore. PrimeVUE s'intègre même à Vuelidate, une bibliothèque de validation de formulaires. Livré avec des thèmes prédéfinis et fournit un éditeur visuel mature pour aider les développeurs à personnaliser leurs propres thèmes.

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

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!