Vue JS - гэта прагрэсіўны фрэймворк JavaScript, які выкарыстоўваецца для распрацоўкі аднастаронкавых прыкладанняў (SPA) і карыстальніцкіх інтэрфейсаў. І гэта адзін з найбольш шырока выкарыстоўваных інтэрфейсных фрэймворкаў.
Адной цікавай асаблівасцю Vue з'яўляецца яго здольнасць разбіваць вэб-старонку на розныя кампаненты. І гэты працэс становіцца прасцей з выкарыстаннем бібліятэк кампанентаў карыстацкага інтэрфейсу.
Існуюць розныя бібліятэкі кампанентаў карыстацкага інтэрфейсу, якія могуць дапамагчы вам лёгка і хутка ствараць кампаненты. Такім чынам, у гэтым блогу мы разгледзім 10 лепшых бібліятэк кампанентаў карыстацкага інтэрфейсу Vue за 2021 год.
1. PrimeVue
PrimeVue - гэта простая ў выкарыстанні, універсальная і эфектыўная бібліятэка кампанентаў карыстальніцкага інтэрфейсу Vue, якая дапамагае вам ствараць выдатныя карыстальніцкія інтэрфейсы.
Ён мае больш за 80 кампанентаў карыстацкага інтэрфейсу з поўнай падтрымкай Кіраўніцтва па даступнасці вэб-кантэнту (WCAG) і адаптыўным дызайнам. І дзякуючы нядаўняму абнаўленню, бібліятэка цяпер мае поўную падтрымку Vue 3. Яна таксама атрымала кучу дадатковых кампанентаў.
Адна з лепшых пераваг Primevue - гэта шырокі спектр кампанентаў. Яны вар'іруюцца ад табліц і пагінатораў да добра распрацаваных арганізацыйных дыяграм на аснове графікаў, якія можна выкарыстоўваць для стварэння інтэрактыўных праграм Vue. Гэта з адкрытым зыходным кодам і мае больш за 1 тысячу зорак на Github і 6,983 штотыднёвыя загрузкі на NPM.
2. Vuetify
Vuetify - гэта бібліятэка карыстацкага інтэрфейсу Vue з прыгожымі кампанентамі ручной працы, якая выкарыстоўвае спецыфікацыю Material Design. Гэта азначае, што ён быў распрацаваны ў дакладнасці ў адпаведнасці са спецыфікацыямі Material Design, прычым кожны кампанент быў старанна распрацаваны, каб быць модульным, спагадным і прадукцыйным.
Vuetify дазваляе наладжваць свае прыкладанні з дапамогай унікальных і дынамічных макетаў і ўдасканальваць стылі кампанентаў з дапамогай зменных SASS.
Ён таксама падтрымлівае інструкцыі па даступнасці, усе сучасныя браўзеры і сумяшчальны з Vue CLI-3. Ён просты ў інтэграцыі і мае мноства шматразовых кампанентаў інтэрфейсу, такіх як каруселі, навігацыя і карты. Vuetify з'яўляецца адкрытым зыходным кодам і мае больш за 29 тысяч зорак на Github і 319,170 XNUMX загрузак штотыдзень на NPM.
3. Чакра UI Vue
Карыстацкі інтэрфейс Chakra - гэта простая модульная і даступная бібліятэка кампанентаў, якая дае вам інструменты для хуткай і лёгкай стварэння прыкладанняў Vue.
Усе кампаненты даступныя (яны строга адпавядаюць стандартам WAI-ARIA), тэматычныя і кампазіцыйныя. Ён падтрымлівае спагадныя стылі з скрынкі і сумяшчальны з цёмным рэжымам.
Карыстацкі інтэрфейс Chakra таксама змяшчае набор кампанентаў макета, такіх як CBox і CStack, якія дазваляюць лёгка стылізаваць кампаненты шляхам перадачы рэквізітаў. Гэта таксама дазваляе вам аўтаматычна імпартаваць кампаненты Chakra UI Vue з дапамогай рашэння плагіна webpack. Гэта з адкрытым зыходным кодам і мае 900+ зорак на Github і 331 загрузку штотыдзень на NPM.
4. Bootstrap Vue
BootstrapVue, з BootstrapVue вы можаце ствараць адаптыўныя, арыентаваныя на мабільныя прылады і даступныя ARIA праекты ў Інтэрнэце, выкарыстоўваючы Vue.js і папулярную інтэрфейсную бібліятэку CSS — Bootstrap. Дакументацыю лёгка зразумець, а таксама лёгка наладзіць. Гэта робіць інтэрфейсныя рэалізацыі больш хуткімі.
Ён прапануе 85+ кампанентаў, больш за 45 даступных убудоў, некалькі дырэктыў і 1000+ значкоў. Ён таксама забяспечвае функцыянальныя кампаненты, адаптаваныя для макетаў і адаптыўнага дызайну. вы таксама можаце лёгка інтэграваць BootstrapVue у свае праекты Nuxt.js з дапамогай модуля Nuxt.js.
Ён таксама выкарыстоўваецца гэтак жа, як і фреймворк CSS для загрузкі. Гэта з адкрытым зыходным кодам на Github з каля 12.9 тыс. зорак і 1.7 тыс. форкаў.
5. Вуэсакс
Vuesax - гэта новая структура кампанентаў карыстальніцкага інтэрфейсу, створаная з дапамогай Vuejs для лёгкага стварэння праектаў ва ўнікальным і прыемным стылі. Vuesax ствараецца з нуля і прызначана для ўсіх тыпаў распрацоўшчыкаў, ад аматараў інтэрфейсу да бэкэнда, якія жадаюць лёгка ствараць свой візуальны падыход да канчатковы карыстальнік. Дызайн унікальны для кожнага кампанента і не прывязаны да якіх-небудзь візуальных тэндэнцый або правілаў дызайну, што робіць праекты, створаныя з яго выкарыстаннем, таксама унікальнымі.
ён прапануе адаптыўныя старонкі і шматразовыя і наладжвальныя кампаненты інтэрфейсу. Таксама лёгка пачаць з дапамогай npm або CDN. У цяперашні час ён не падтрымлівае Vue CLI 3 у яго апошняй версіі. Гэта з адкрытым зыходным кодам на Github з каля 4.9 тыс. зорак і 6700 загрузак штотыдзень NPM.
6. Ant Design Vue
Ant Design vue, заснаваны на спецыфікацыі Ant Design, Ant design vue - гэта бібліятэка карыстацкага інтэрфейсу vue, якая змяшчае набор высакаякасных кампанентаў і дэманстрацый для стварэння багатых інтэрактыўных карыстальніцкіх інтэрфейсаў.
Ant-design-vue забяспечвае мноства кампанентаў карыстальніцкага інтэрфейсу для ўзбагачэння вашых вэб-прыкладанняў, такіх як Skeleton, скрыня, статыстыка і многае іншае.
Дзякуючы нядаўняму выпуску ant design vue версіі 2, ён быў абноўлены, каб зрабіць яго больш хуткім і простым у інтэграцыі, меншым памерам пакета, а таксама падтрымлівае Vue 3, новы дакумент Composition API. Ён таксама падтрымлівае сучасныя вэб-браўзеры, рэндэрынгу на баку сервера і электрон. Ён мае больш за 13 тысяч зорак на Github і 39,693 XNUMX штотыднёвыя загрузкі NPM.
7. Квазар
Quasar - гэта адзін з лепшых фрэймворкаў карыстацкага інтэрфейсу Vue, які дазваляе распрацоўшчыкам выкарыстоўваць адну базу зыходнага кода для ўсіх платформаў праз Quasar CLI з перадавымі практыкамі. Гэта дазваляе распрацоўнікам засяродзіцца на змесціве іх прыкладання, а не на ўсіх іншых матэрыялах (сістэма зборкі, макет) вакол яго. ён арыентаваны на выкананне рэкамендацый Material 2.0, а таксама мае супольнасць, якая вельмі падтрымлівае.
Адной з асаблівасцяў Quasar з'яўляецца магчымасць напісаць код адзін раз і адначасова разгарнуць яго як вэб-сайт, мабільнае прыкладанне з выкарыстаннем толькі адной кодавай базы. Існуе таксама новая версія ў бэта-версіі, якая падтрымлівае функцыі vue 3. Ён мае каля 17.8 тыс. зорак на Github.
8. Б'юфі
Buefy - гэта лёгкая бібліятэка кампанентаў карыстацкага інтэрфейсу для Vue JS, заснаваная на Bulma (фреймворк CSS). Buefy спалучае Bulma з Vue, дапамагаючы вам ствараць прыгожыя прыкладанні з мінімальным кодам. гэта ўзровень javascript для вашага інтэрфейсу Bulma.
Яго можна імпартаваць цалкам або асобныя кампаненты на звычайную вэб-старонку. Інтэграваць яго ў свой праект даволі проста, гэта можна зрабіць з дапамогай npm або CDN.
Buefy забяспечвае гатовыя кампаненты інтэрфейсу, макет і значкі. Кампаненты могуць выкарыстоўваць SASS для вашай тэмы. Ён таксама падтрымлівае сучасныя браўзеры.
9. Vue Матэрыял
Vue Material - гэта шырока выкарыстоўваная лёгкая структура, якая рэалізуе спецыфікацыі Material Design. Гэта адна з лепшых інтэграцый паміж Vue.js і спецыфікацыямі Material Design! Вы можаце лёгка наладзіць яго ў адпаведнасці з вашымі патрэбамі праз просты API.
Ён сумяшчальны з адаптыўным дызайнам і падтрымкай усіх сучасных вэб-браўзераў. Бібліятэка падзелена на тэмы, кампаненты і элементы інтэрфейсу. Тэмы даюць дакладнае кіраўніцтва аб тым, як тэматызаваць сваё прыкладанне (або напісаць уласныя тэмы), а кампаненты і элементы карыстацкага інтэрфейсу складаюцца з макетаў, навігацыі, тыпаграфікі, значкоў і яшчэ 30 кампанентаў. Ён мае каля 9.2 тыс. зорак і 1.1 тыс. форкаў на Github і 21 тыс. + штотыднёвыя загрузкі NPM.
10. KeenUI
KeenUI - гэта лёгкая бібліятэка інтэрфейсу vue.js з простым API, натхнёная Google Material Design. Keen UI не з'яўляецца структурай CSS. Такім чынам, ён не ўключае ў сябе стылі для сістэмы сеткі, тыпаграфікі і г.д. Замест гэтага акцэнт робіцца на інтэрактыўных кампанентах, якія патрабуюць Javascript.
Ён мае каля 30 шматразовых кампанентаў. Кампаненты можна наладзіць шляхам перавызначэння стыляў з дапамогай зменных SASS. вы можаце інтэграваць яго ў свой праект з дапамогай CDN або npm. Гэта з адкрытым зыходным кодам і мае каля 4k зорак на Github.
заключэнне
Бібліятэкі кампанентаў карыстацкага інтэрфейсу, безумоўна, значна палягчаюць стварэнне праекта. Выбар правільнага залежыць ад асаблівасцяў праекта, над якім вы хочаце працаваць. Перад тым, як пагрузіцца ў новы праект, пажадана азнаёміцца з бібліятэкай кампанентаў карыстацкага інтэрфейсу, якая лепш за ўсё падыходзіць для гэтай мэты.