Vue JS איז אַ פּראָגרעסיוו דזשאַוואַסקריפּט פריימווערק וואָס איז געניצט צו אַנטוויקלען איין-בלאַט אַפּלאַקיישאַנז (ספּאַס) און באַניצער ינטערפייסיז. און עס איז איינער פון די מערסט וויידלי געוויינט פראָנט-ענד פראַמעוואָרקס דאָרט.
איין טשיקאַווע שטריך פון Vue איז די פיייקייט צו ברעכן אַראָפּ אַ וועבזייטל אין פאַרשידענע קאַמפּאָונאַנץ. און דעם פּראָצעס ווערט סימפּלער מיט די נוצן פון וי קאָמפּאָנענט לייברעריז.
עס זענען פאַרשידן וי קאָמפּאָנענט לייברעריז וואָס קענען העלפֿן איר שאַפֿן קאַמפּאָונאַנץ לייכט און געשווינד. אַזוי אין דעם בלאָג, מיר וועלן אָפּשאַצן די שפּיץ 10 Vue UI קאָמפּאָנענט ליבראַריעס פֿאַר 2021.
1. PrimeVue
PrimeVue איז אַ פּשוט צו נוצן, ווערסאַטאַל און פּערפאָרמאַנט Vue UI קאָמפּאָנענט ביבליאָטעק וואָס העלפּס איר בויען אָסאַם באַניצער ינטערפייסיז.
עס האט איבער 80+ וי קאַמפּאָונאַנץ מיט פול שטיצן פֿאַר וועב אינהאַלט אַקסעסאַביליטי גיידליינז (WCAG) און אָפּרופיק פּלאַן. און דאַנק צו אַ פריש דערהייַנטיקן, די ביבליאָטעק איצט האט פול שטיצן פֿאַר Vue 3. עס אויך גאַט אַ בינטל מער קאַמפּאָונאַנץ.
איינער פון די בעסטער טינגז וועגן Primevue איז די ברייט קייט פון קאַמפּאָונאַנץ. זיי קייט פון טישן און פּאַדזשאַנייטערז צו געזונט-קראַפטעד גראַפיק-באזירט אָרגאַניזאַציע טשאַרץ וואָס איר קענען נוצן צו שאַפֿן ינטעראַקטיוו Vue אַפּפּס. עס איז אָפֿן-מקור און האט 1 ק+ שטערן אויף Github און 6,983 וויקלי דאַונלאָודז אויף NPM.
2. Vuetify
Vuetify איז אַ Vue UI ביבליאָטעק מיט ביוטאַפלי כאַנדקראַפטיד קאַמפּאָונאַנץ וואָס ניצט די מאַטעריאַל פּלאַן באַשרייַבונג. דעם מיטל אַז עס איז דעוועלאָפּעד פּונקט לויט די מאַטעריאַל פּלאַן ספּעסאַפאַקיישאַנז מיט יעדער קאָמפּאָנענט מאַטיקיאַלאַסלי קראַפטעד צו זיין מאַדזשאַלער, אָפּרופיק און פּערפאָרמאַנסע.
Vuetify אַלאַוז איר צו קאַסטאַמייז דיין אַפּלאַקיישאַנז מיט יינציק און דינאַמיש לייאַוץ און שליימעסדיק די סטיילז פון דיין קאַמפּאָונאַנץ מיט SASS וועריאַבאַלז.
עס אויך שטיצט אַקסעסאַביליטי גיידליינז, אַלע מאָדערן בראַוזערז און איז קאַמפּאַטאַבאַל מיט Vue CLI-3. עס איז גרינג צו ויסשטימען און האט אַ פּלאַץ פון ריוזאַבאַל וי קאַמפּאָונאַנץ ווי קעראַסאַלז, נאַוויגאַציע און קאַרדס. Vuetify איז אָפֿן מקור און מיט איבער 29 ק שטערן אויף Github און 319,170 וויקלי דאַונלאָודז אויף NPM.
3. טשאַקראַ וי וויו
Chakra UI איז אַ פּשוט מאַדזשאַלער און צוטריטלעך קאָמפּאָנענט ביבליאָטעק וואָס גיט איר די מכשירים צו בויען Vue אַפּלאַקיישאַנז געשווינד און לייכט.
אַלע די קאַמפּאָונאַנץ זענען צוטריטלעך (עס שטרענג גייט WAI-ARIA סטאַנדאַרדס), טהעמעאַבלע און קאַמפּאָוזאַבאַל. עס שטיצט אָפּרופיק סטיילז אויס פון די קעסטל און איז קאַמפּאַטאַבאַל מיט טונקל מאָדע.
Chakra UI אויך כּולל אַ סכום פון אויסלייג קאַמפּאָונאַנץ ווי CBox און CSTack וואָס מאַכן עס גרינג צו סטיל דיין קאַמפּאָונאַנץ דורך פאָרן פּראַפּס. עס אויך אַלאַוז איר צו אַוטאָ-ימפּאָרט Chakra UI Vue קאַמפּאָונאַנץ מיט אַ וועבפּאַק פּלוגין לייזונג. עס איז אָפֿן מקור און האט מער ווי 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
Vuesax איז אַ נייַע UI קאָמפּאָנענט פריימווערק באשאפן מיט Vuejs צו מאַכן פראיעקטן לייכט און מיט אַ יינציק און אָנגענעם סטיל, vuesax איז באשאפן פֿון קראַצן און דיזיינד פֿאַר אַלע טייפּס פון דעוועלאָפּערס, פֿון די פראָנטענד ליבהאָבער צו די באַקענד וואָס ווילן צו מאַכן זייער וויזשאַוואַל צוגאַנג צו דעם. דער סוף-באַניצער. די דיזיינז זענען יינציק פֿאַר יעדער קאָמפּאָנענט און זענען נישט אַנגקערד צו קיין וויזשאַוואַל טרענדס אָדער פּלאַן כּללים, וואָס מאכט פּראַדזשעקס געבויט מיט אים יינציק.
עס אָפפערס אָפּרופיק בלעטער און ריוזאַבאַל און קוסטאָמיזאַבלע וי קאַמפּאָונאַנץ. עס איז אויך גרינג צו אָנהייבן מיט npm אָדער CDN. דערווייַל עס שטיצט נישט Vue CLI 3 אין זיין לעצטע ווערסיע. עס איז אָפֿן-סאָורסעד אויף Github מיט וועגן 4.9 ק שטערן און 6700 וויקלי דאַונלאָודז NPM.
6. מוראַשקע פּלאַן וויו
Ant Design vue באזירט אויף די Ant Design ספּעסאַפאַקיישאַן, Ant design vue איז אַ ווו וי ביבליאָטעק וואָס כּולל אַ סכום פון הויך-קוואַליטעט קאַמפּאָונאַנץ און דעמאָס פֿאַר בויען רייַך, ינטעראַקטיוו באַניצער ינטערפייסיז.
Ant-design-vue גיט שעפע פון וי קאַמפּאָונאַנץ צו באַרייַכערן דיין וועב אַפּלאַקיישאַנז אַזאַ ווי סקעלעט, שופלאָד, סטאַטיסטיק און אַזוי פיל מער.
מיט די לעצטע מעלדונג פון מוראַשקע פּלאַן וווע ווערסיע 2, עס איז דערהייַנטיקט צו זיין פאַסטער און גרינגער צו ויסשטימען, קלענערער פּעקל גרייס, און אויך שטיצט Vue 3, New Composition API דאָקומענט. עס אויך שטיצט מאָדערן וועב בראַוזערז, סערווער זייַט רענדערינג און עלעקטראָן. עס האט איבער 13 ק שטערן אויף Github און אויף 39,693 וויקלי דאַונלאָודז NPM.
7. קוואַזאַר
Quasar איז איינער פון די בעסטער Vue UI פראַמעוואָרקס וואָס לאָזן דעוועלאָפּערס צו נוצן איין מקור קאָד באַזע פֿאַר אַלע פּלאַטפאָרמס דורך Quasar CLI מיט די בעסטער פּראַקטיסיז. עס לעץ דעוועלאָפּערס פאָקוס אויף די אינהאַלט פון זייער אַפּ אלא ווי אַלע אנדערע קעסל פּלייטינג שטאָפּן (בויען סיסטעם, אויסלייג) אַרום אים. עס איז פאָוקיסט אויף נאָכפאָלגן די מאַטעריאַל 2.0 גיידליינז און אויך האט אַ זייער סאַפּאָרטיוו קהל.
איינער פון די ספּעציעל טינגז וועגן קוואַסאַר איז די פיייקייט צו שרייַבן קאָד אַמאָל און סיימאַלטייניאַסלי צעוויקלען עס ווי אַ וועבזייטל, אַ מאָביל אַפּ מיט בלויז איין קאָד. עס איז אויך אַ נייַע ווערסיע דערווייַל אין ביתא וואָס וואָלט שטיצן VUE 3 פֿעיִקייטן. עס האט וועגן 17.8 ק שטערן אויף גיטהוב.
8. בועפי
Buefy איז אַ לייטווייט וי קאָמפּאָנענט ביבליאָטעק פֿאַר Vue JS באזירט אויף Bulma (אַ CSS פריימווערק). Buefy קאַמביינז Bulma מיט Vue, העלפּינג איר בויען גוט-קוקן אַפּלאַקיישאַנז מיט מינימאַל קאָד. עס איז די דזשאַוואַסקריפּט שיכטע פֿאַר דיין בולמאַ צובינד.
עס קענען זיין ימפּאָרטיד גאָר אָדער איין קאַמפּאָונאַנץ אויף אַ פּראָסט וועבפּאַגע. ינטאַגרייטינג עס אין דיין פּרויעקט איז גאַנץ גרינג, קענען זיין געטאן מיט npm אָדער CDN.
Buefy גיט פאַרטיק UI קאַמפּאָונאַנץ, אויסלייג און ייקאַנז. די קאַמפּאָונאַנץ קענען נוצן SASS צו דיין טעמע. עס אויך שטיצט מאָדערן בראַוזערז.
9. וויו מאַטעריאַל
Vue Material איז אַ וויידלי געוויינט, לייטווייט פריימווערק וואָס ימפּלאַמאַנץ די מאַטעריאַל פּלאַן ספּעסאַפאַקיישאַנז. עס איז איינער פון די בעסטער ינאַגריישאַן צווישן Vue.js און מאַטעריאַל פּלאַן ספּעקס! איר קענען לייכט קאַנפיגיער עס צו פּאַסן אַלע דיין דאַרף דורך אַן גרינג אַפּי.
עס איז קאַמפּאַטאַבאַל מיט אָפּרופיק פּלאַן און שטיצן פֿאַר אַלע מאָדערן וועב בראַוזערז. די ביבליאָטעק איז צעטיילט אין טעמעס, קאַמפּאָונאַנץ און וי עלעמענטן. די טעמעס געבן אַ דעפיניטיווע וועגווייַזער ווי צו טעמע דיין אַפּלאַקיישאַן (אָדער שרייַבן דיין אייגענע טעמעס) און די קאַמפּאָונאַנץ און וי עלעמענטן צונויפשטעלנ זיך פון לייאַוץ, נאַוויגאַציע, טיפּאָגראַפי, ייקאַנז און 30 מער קאַמפּאָונאַנץ. עס האט וועגן 9.2 ק שטערן און 1.1 ק פאָרקס אויף גיטהוב און 21 ק + וויקלי דאַונלאָודז NPM.
10. KeenUI
KeenUI איז אַ לייטווייט vue.js וי ביבליאָטעק מיט אַ פּשוט אַפּי, ינספּייערד דורך Google ס מאַטעריאַל פּלאַן. Keen UI איז נישט אַ CSS פריימווערק. דעריבער, עס טוט נישט אַרייַננעמען סטיילז פֿאַר אַ גריד סיסטעם, טיפּאָגראַפי, אאז"ו ו. אַנשטאָט, די פאָקוס איז אויף ינטעראַקטיוו קאַמפּאָונאַנץ וואָס דאַרפן דזשאַוואַסקריפּט.
עס האט וועגן 30 ריוזאַבאַל קאַמפּאָונאַנץ. די קאַמפּאָונאַנץ זענען קוסטאָמיזאַבלע דורך אָוווערריידינג די סטיילז מיט SASS וועריאַבאַלז. איר קענען ויסשטימען עס אין דיין פּרויעקט מיט CDN אָדער npm. עס איז אָפֿן-סאָורסעד און האט וועגן 4 ק שטערן אויף גיטהוב.
סאָף
וי קאָמפּאָנענט לייברעריז באשטימט מאַכן בויען אַ פּרויעקט פיל גרינגער. קלייַבן די רעכט איינער דעפּענדס אויף די פֿעיִקייטן פון די פּרויעקט איר ווילן צו אַרבעטן אויף. איידער איר דייווינג אין אַ נייַע פּרויעקט, עס איז קעדייַיק פֿאַר איינער צו באריכטן די וי קאָמפּאָנענט ביבליאָטעק וואָס איז בעסטער פּאַסיק פֿאַר דעם ציל.