Vue JS היא מסגרת JavaScript מתקדמת המשמשת לפיתוח יישומי עמוד בודד (SPAs) וממשקי משתמש. וזו אחת מהמסגרות החזיתיות הנפוצות ביותר שיש.

 

תכונה מעניינת אחת של Vue היא היכולת שלה לפרק דף אינטרנט לרכיבים שונים. ותהליך זה הופך לפשוט יותר עם השימוש בספריות רכיבי ממשק משתמש.

 

ישנן ספריות שונות של רכיבי ממשק משתמש שיכולות לעזור לך ליצור רכיבים בקלות ובמהירות. אז בבלוג הזה, אנחנו הולכים לסקור את 10 ספריות רכיבי ממשק המשתמש של Vue לשנת 2021.

 

1. PrimeVue

 

PrimeVue היא ספריית רכיבים של Vue UI פשוטה לשימוש, צדדית וביצועית שעוזרת לך לבנות ממשקי משתמש מדהימים.

 

יש לו יותר מ-80 רכיבי ממשק משתמש עם תמיכה מלאה בהנחיות נגישות לתוכן אינטרנט (WCAG) ועיצוב רספונסיבי. ובזכות עדכון אחרון, לספרייה יש כעת תמיכה מלאה ב-Vue 3. יש לה גם עוד המון רכיבים.

 

אחד הדברים הטובים ביותר ב- Primevue הוא מגוון הרכיבים הרחב שלו. הם נעים מטבלאות ומדפי עימוד ועד תרשימי ארגון מבוססי גרפים עשויים היטב, שבהם אתה יכול להשתמש כדי ליצור אפליקציות Vue אינטראקטיביות. זה קוד פתוח ויש לו 1k+ כוכבים ב-Github ו-6,983 הורדות שבועיות ב-NPM.

 

2. Vuetify

 

Vuetify היא ספריית ממשק המשתמש של Vue עם רכיבים בעבודת יד יפהפיה המשתמשת במפרט עיצוב החומר. המשמעות היא שהוא פותח בדיוק לפי מפרטי עיצוב החומרים, כאשר כל רכיב מעוצב בקפידה כדי להיות מודולרי, תגובה וביצועים.

 

Vuetify מאפשרת לך להתאים אישית את היישומים שלך עם פריסות ייחודיות ודינמיות ולשכלל את הסגנונות של הרכיבים שלך באמצעות משתני SASS.

 

זה גם תומך בהנחיות נגישות, בכל הדפדפנים המודרניים, ותואם ל-Vue CLI-3. זה קל לשילוב ויש לו הרבה רכיבי ממשק משתמש לשימוש חוזר כמו קרוסלות, ניווטים וכרטיסים. Vuetify היא קוד פתוח ועם למעלה מ-29 אלף כוכבים ב-Github ו-319,170 הורדות שבועיות ב-NPM.

 

3. צ'אקרה UI Vue

 

ממשק המשתמש של צ'אקרה הוא ספריית רכיבים מודולרית פשוטה ונגישה שנותנת לך את הכלים לבנות יישומי Vue במהירות ובקלות.

 

כל הרכיבים נגישים (זה עומד בקפדנות בתקני WAI-ARIA), ניתנים לעיצוב וניתנים להרכבה. הוא תומך בסגנונות מגיבים מחוץ לקופסה ותואם למצב כהה.

 

ממשק המשתמש של צ'אקרה מכיל גם קבוצה של רכיבי פריסה כמו 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.

 

הוא משמש גם באותו אופן שבו נעשה שימוש במסגרת ה-bootstrap CSS. זה בקוד פתוח ב-Github עם כ-12.9k כוכבים ו-1.7k מזלגות.

 

5. Vuesax

 

Vuesax היא מסגרת חדשה של רכיבי ממשק משתמש שנוצרה עם Vuejs כדי ליצור פרויקטים בקלות ובסגנון ייחודי ונעים, vuesax נוצרת מאפס ומיועדת לכל סוגי המפתחים מאוהבי החזית ועד ל-backend שרוצים ליצור בקלות את הגישה הוויזואלית שלהם ל משתמש הקצה. העיצובים ייחודיים לכל רכיב ואינם מעוגנים לכל מגמות חזותיות או כללי עיצוב, מה שהופך גם פרויקטים שנבנים באמצעותו לייחודיים.

 

הוא מציע דפים רספונסיביים ורכיבי ממשק משתמש ניתנים לשימוש חוזר וניתנים להתאמה אישית. קל גם להתחיל עם שימוש ב-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 מספק שפע של רכיבי ממשק משתמש כדי להעשיר את יישומי האינטרנט שלך כגון שלד, מגירה, סטטיסטיקות ועוד הרבה יותר.

 

עם השחרור האחרון של ant design vue גרסה 2, הוא עודכן להיות מהיר וקל יותר לשילוב, גודל חבילה קטן יותר, ותומך גם ב-Vue 3, New Composition API Document. הוא תומך גם בדפדפני אינטרנט מודרניים, בעיבוד בצד השרת ובאלקטרון. יש לו יותר מ-13 כוכבים ב-Github וב-39,693 הורדות שבועיות 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 הוא מסגרת קלת משקל בשימוש נרחב המיישמת את מפרטי עיצוב החומרים. זהו אחד האינטגרציות הטובות ביותר בין Vue.js למפרטי עיצוב חומרי! אתה יכול בקלות להגדיר אותו כך שיתאים לכל הצרכים שלך באמצעות API קל.

 

זה תואם לעיצוב רספונסיבי ולתמיכה בכל דפדפני האינטרנט המודרניים. הספרייה מחולקת ל-Themes, Components ו-UI Elements. ערכות הנושא מספקות מדריך סופי כיצד לעצב את היישום שלך (או לכתוב ערכות נושא משלך) והרכיבים ורכיבי ממשק המשתמש מורכבים מפריסות, ניווט, טיפוגרפיה, סמלים ועוד 30 רכיבים. יש לו כ-9.2K כוכבים ו-1.1K מזלגות ב-Github ו-21K+ הורדות שבועיות NPM.

 

10. KeenUI

 

KeenUI היא ספריית ממשק משתמש של vue.js קלת משקל עם ממשק API פשוט, בהשראת עיצוב החומרים של גוגל. Keen UI אינו מסגרת CSS. לכן, הוא אינו כולל סגנונות עבור מערכת רשת, טיפוגרפיה וכו'. במקום זאת, ההתמקדות היא ברכיבים אינטראקטיביים הדורשים Javascript.

 

יש לו כ-30 רכיבים לשימוש חוזר. הרכיבים ניתנים להתאמה אישית על ידי החלפת הסגנונות באמצעות משתני SASS. אתה יכול לשלב אותו בפרויקט שלך באמצעות CDN או npm. זה בקוד פתוח ויש לו בערך 4k כוכבים ב- Github.

 

סיכום

 

ספריות רכיבי ממשק משתמש בהחלט הופכות את בניית הפרויקט להרבה יותר קלה. הבחירה הנכונה תלויה בתכונות של הפרויקט שאתה רוצה לעבוד עליו. לפני שצולל לפרויקט חדש, מומלץ שאחד יבדוק את ספריית רכיבי ממשק המשתמש המתאימה ביותר למטרה.