Vue JS je progresivní framework JavaScript, který se používá k vývoji jednostránkových aplikací (SPA) a uživatelských rozhraní. A je to jeden z nejpoužívanějších front-end frameworků.
Jednou ze zajímavých vlastností Vue je jeho schopnost rozdělit webovou stránku na různé komponenty. A tento proces se zjednoduší s použitím knihoven komponent uživatelského rozhraní.
Existují různé knihovny komponent uživatelského rozhraní, které vám mohou pomoci snadno a rychle vytvářet komponenty. V tomto blogu se tedy podíváme na 10 nejlepších knihoven komponent uživatelského rozhraní Vue pro rok 2021.
1. PrimeVue
PrimeVue je snadno použitelná, všestranná a výkonná knihovna komponent uživatelského rozhraní Vue, která vám pomůže vytvořit úžasná uživatelská rozhraní.
Má více než 80 komponent uživatelského rozhraní s plnou podporou pokynů pro přístupnost webového obsahu (WCAG) a responzivním designem. A díky nedávné aktualizaci má knihovna nyní plnou podporu pro Vue 3. Dostala také spoustu dalších komponent.
Jednou z nejlepších věcí na Primevue je široká škála komponent. Pohybují se od tabulek a stránkovačů až po dobře zpracované organizační diagramy založené na grafech, které můžete použít k vytváření interaktivních aplikací Vue. Je to open-source a má 1k+ hvězdiček na Github a 6,983 stažení týdně na NPM.
2. Vuetify
Vuetify je knihovna uživatelského rozhraní Vue s krásně ručně vyrobenými komponentami, která využívá specifikaci Material Design. To znamená, že byl vyvinut přesně podle specifikací Material Design, přičemž každá součást byla pečlivě vytvořena tak, aby byla modulární, citlivá a výkonná.
Vuetify vám umožňuje přizpůsobit vaše aplikace jedinečným a dynamickým rozvržením a zdokonalit styly vašich komponent pomocí proměnných SASS.
Podporuje také pokyny pro přístupnost, všechny moderní prohlížeče a je kompatibilní s Vue CLI-3. Snadno se integruje a má mnoho opakovaně použitelných komponent uživatelského rozhraní, jako jsou karusely, navigace a karty. Vuetify je open source a má více než 29 319,170 hvězdiček na Github a XNUMX XNUMX stažení týdně na NPM.
3. Chakra UI Vue
Chakra UI je jednoduchá modulární a přístupná knihovna komponent, která vám poskytuje nástroje pro rychlé a snadné vytváření aplikací Vue.
Všechny komponenty jsou přístupné (přísně se řídí standardy WAI-ARIA), tématické a složitelné. Podporuje responzivní styly ihned po vybalení a je kompatibilní s tmavým režimem.
Chakra UI také obsahuje sadu komponent rozvržení, jako je CBox a CStack, které usnadňují styling vašich komponent předáváním rekvizit. Umožňuje vám také automaticky importovat komponenty Chakra UI Vue pomocí řešení zásuvného modulu webpack. Je to open-source a má 900+ hvězdiček na Github a 331 týdenních stažení na NPM.
4. Bootstrap Vue
BootstrapVue, S BootstrapVue můžete na webu vytvářet responzivní projekty zaměřené na mobily a přístupné ARIA pomocí Vue.js a oblíbené front-endové CSS knihovny — Bootstrap. Dokumentace je snadno pochopitelná a lze ji také snadno nastavit. Díky tomu jsou implementace front-endu rychlejší.
Nabízí 85+ komponent, více než 45 dostupných pluginů, několik direktiv a 1000+ ikon. Poskytuje také funkční komponenty přizpůsobené pro rozvržení a responzivní design. můžete také snadno integrovat BootstrapVue do svých projektů Nuxt.js pomocí modulu Nuxt.js.
Používá se také stejným způsobem jako bootstrap CSS framework. Je to open-source na Github s asi 12.9 1.7 hvězdičkami a XNUMX XNUMX forky.
5. Vuesax
Vuesax je nový rámec komponent uživatelského rozhraní vytvořený pomocí Vuejs, aby bylo možné vytvářet projekty snadno a s jedinečným a příjemným stylem, vuesax je vytvořen od nuly a určen pro všechny typy vývojářů od milovníků frontendu po backend, kteří chtějí snadno vytvořit svůj vizuální přístup k koncového uživatele. Návrhy jsou jedinečné pro každou komponentu a nejsou ukotveny žádnými vizuálními trendy nebo pravidly designu, díky čemuž jsou jedinečné i projekty s nimi postavené.
nabízí responzivní stránky a opakovaně použitelné a přizpůsobitelné komponenty uživatelského rozhraní. Je také snadné začít s použitím npm nebo CDN. V současné době nepodporuje Vue CLI 3 ve své nejnovější verzi. Je to open-source na Github s asi 4.9 6700 hvězdičkami a XNUMX stažení NPM týdně.
6. Ant Design Vue
Ant Design vue založený na specifikaci Ant Design, Ant design vue je knihovna uživatelského rozhraní vue, která obsahuje sadu vysoce kvalitních komponent a ukázek pro vytváření bohatých interaktivních uživatelských rozhraní.
Ant-design-vue poskytuje spoustu komponent uživatelského rozhraní, které obohatí vaše webové aplikace, jako je Skeleton, šuplík, statistiky a mnoho dalšího.
S nedávným vydáním ant design vue verze 2 byl aktualizován, aby byl rychlejší a snadněji integrovatelný, menší velikost balíku a také podporuje Vue 3, dokument New Composition API. Podporuje také moderní webové prohlížeče, vykreslování na straně serveru a elektron. Na Githubu má přes 13 39,693 hvězdiček a XNUMX XNUMX stažení NPM týdně.
7. Kvazar
Quasar je jedním z nejlepších rámců uživatelského rozhraní Vue, které umožňují vývojářům používat jednu základnu zdrojového kódu pro všechny platformy prostřednictvím rozhraní Quasar CLI s osvědčenými postupy hned po vybalení. Umožňuje vývojářům soustředit se na obsah jejich aplikace spíše než na všechny ostatní věci pokovování kotle (systém sestavení, rozvržení) kolem ní. je zaměřena na dodržování pokynů Material 2.0 a má také velmi vstřícnou komunitu.
Jednou ze speciálních věcí na Quasaru je schopnost napsat kód jednou a současně jej nasadit jako webovou stránku, mobilní aplikaci využívající pouze jednu kódovou základnu. V současné době je k dispozici také nová verze, která by podporovala funkce vue 3. Na Githubu má asi 17.8 tisíc hvězd.
8. Buefy
Buefy je lehká knihovna komponent uživatelského rozhraní pro Vue JS založená na Bulma (rámci CSS). Buefy kombinuje Bulma s Vue a pomáhá vám vytvářet dobře vypadající aplikace s použitím minimálního kódu. je to vrstva javascriptu pro vaše rozhraní Bulma.
Může být importován buď celý, nebo jednotlivé komponenty na běžné webové stránce. Integrace do vašeho projektu je poměrně snadná, lze ji provést pomocí npm nebo CDN.
Buefy poskytuje hotové komponenty uživatelského rozhraní, rozložení a ikony. Komponenty mohou používat SASS k vašemu tématu. Podporuje také moderní prohlížeče.
9. Materiál Vue
Vue Material je široce používaný, lehký rámec, který implementuje specifikace Material Design. Je to jedna z nejlepších integrací mezi specifikacemi Vue.js a Material Design! Pomocí jednoduchého rozhraní API jej můžete snadno nakonfigurovat tak, aby vyhovoval všem vašim potřebám.
Je kompatibilní s responzivním designem a podporou všech moderních webových prohlížečů. Knihovna je rozdělena na Motivy, Komponenty a Prvky uživatelského rozhraní. Motivy poskytují definitivní návod, jak vytvořit motiv aplikace (nebo napsat vlastní motivy) a komponenty a prvky uživatelského rozhraní se skládají z rozvržení, navigace, typografie, ikon a dalších 30 komponent. Má asi 9.2 1.1 hvězdiček a 21 XNUMX forků na Github a XNUMX XNUMX + týdenní stažení NPM.
10. KeenUI
KeenUI je lehká knihovna uživatelského rozhraní vue.js s jednoduchým API, inspirovaná Material Designem společnosti Google. Keen UI není framework CSS. Proto nezahrnuje styly pro mřížkový systém, typografii atd. Místo toho se zaměřuje na interaktivní komponenty, které vyžadují Javascript.
Má asi 30 opakovaně použitelných součástí. Komponenty jsou přizpůsobitelné přepsáním stylů pomocí proměnných SASS. můžete jej integrovat do svého projektu buď pomocí CDN nebo npm. Je to open-source a na Githubu má asi 4k hvězd.
Proč investovat do čističky vzduchu?
Knihovny komponent uživatelského rozhraní rozhodně usnadňují vytváření projektu. Výběr správného závisí na vlastnostech projektu, na kterém chcete pracovat. Než se ponoříte do nového projektu, je vhodné si prohlédnout knihovnu komponent uživatelského rozhraní, která se pro tento účel nejlépe hodí.