Vue JS یک چارچوب جاوا اسکریپت مترقی است که برای توسعه اپلیکیشن های تک صفحه ای (SPA) و رابط های کاربری استفاده می شود. و یکی از پرکاربردترین فریم ورک‌های فرانت‌اند است.

 

یکی از ویژگی های جالب Vue توانایی آن در تجزیه یک صفحه وب به اجزای مختلف است. و این فرآیند با استفاده از کتابخانه های مؤلفه UI ساده تر می شود.

 

کتابخانه‌های مؤلفه‌های رابط کاربری مختلفی وجود دارد که می‌تواند به شما کمک کند اجزای سازنده را به راحتی و به سرعت ایجاد کنید. بنابراین در این وبلاگ، ما قصد داریم 10 کتابخانه کامپوننت رابط کاربری Vue را برای سال 2021 بررسی کنیم.

 

1. PrimeVue

 

PrimeVue یک کتابخانه ساده برای استفاده، همه کاره و کارآمد Vue UI Component Library است که به شما کمک می کند رابط های کاربری عالی بسازید.

 

دارای بیش از 80 مؤلفه رابط کاربری با پشتیبانی کامل از دستورالعمل‌های دسترسی به محتوای وب (WCAG) و طراحی واکنش‌گرا. و به لطف به‌روزرسانی اخیر، کتابخانه اکنون از Vue 3 پشتیبانی کامل می‌کند. همچنین دارای تعداد زیادی مؤلفه بیشتر است.

 

یکی از بهترین چیزها در مورد Primevue طیف گسترده ای از اجزای آن است. آنها از جداول و صفحه‌بندی‌کننده‌ها گرفته تا نمودارهای سازمانی مبتنی بر نمودار به خوبی ساخته شده‌اند که می‌توانید برای ایجاد برنامه‌های Vue تعاملی استفاده کنید. منبع باز است و دارای 1k+ ستاره در Github و 6,983 بارگیری هفتگی در NPM است.

 

2. Vuetify

 

Vuetify یک کتابخانه Vue UI با اجزای دست ساز زیبایی است که از مشخصات طراحی متریال استفاده می کند. این بدان معنی است که دقیقاً مطابق با مشخصات طراحی متریال توسعه یافته است و هر مؤلفه به طور دقیق ساخته شده است تا ماژولار، پاسخگو و عملکردی باشد.

 

Vuetify به شما امکان می دهد برنامه های خود را با طرح بندی های منحصر به فرد و پویا سفارشی کنید و سبک های اجزای خود را با استفاده از متغیرهای SASS کامل کنید.

 

همچنین از دستورالعمل های دسترسی، همه مرورگرهای مدرن پشتیبانی می کند و با Vue CLI-3 سازگار است. ادغام آن آسان است و دارای بسیاری از اجزای رابط کاربری قابل استفاده مجدد مانند چرخ فلک، ناوبری و کارت است. Vuetify منبع باز و با بیش از 29 هزار ستاره در Github و 319,170 بارگیری هفتگی در NPM است.

 

3. چاکرا UI Vue

 

Chakra UI یک کتابخانه کامپوننت ماژولار ساده و در دسترس است که ابزارهایی را برای ایجاد سریع و آسان برنامه های Vue در اختیار شما قرار می دهد.

 

همه اجزا در دسترس هستند (به شدت از استانداردهای WAI-ARIA پیروی می کند)، موضوعی و قابل ترکیب هستند. از سبک‌های واکنش‌گرا پشتیبانی می‌کند و با حالت تاریک سازگار است.

 

رابط کاربری چاکرا همچنین شامل مجموعه‌ای از اجزای طرح‌بندی مانند CBox و CStack است که سبک دادن به اجزای خود را با عبور دادن پروپ‌ها آسان می‌کند. همچنین به شما این امکان را می دهد که اجزای Chakra UI Vue را با استفاده از یک راه حل پلاگین webpack وارد کنید. منبع باز است و بیش از 900 ستاره در Github و 331 بارگیری هفتگی در NPM دارد.

 

4. Bootstrap Vue

 

BootstrapVue، با BootstrapVue می‌توانید با استفاده از Vue.js و کتابخانه CSS front-end - Bootstrap، پروژه‌های واکنش‌گرا، پاسخگو، و قابل دسترسی ARIA در وب بسازید. درک مستندات آسان است و تنظیم آن نیز آسان است. این باعث می شود که پیاده سازی های front-end سریعتر انجام شوند.

 

بیش از 85 مؤلفه، بیش از 45 افزونه در دسترس، چندین دستورالعمل و بیش از 1000 نماد ارائه می دهد. همچنین اجزای کاربردی را برای طرح‌بندی‌ها و طراحی واکنش‌گرا فراهم می‌کند. همچنین می توانید به راحتی BootstrapVue را با استفاده از ماژول Nuxt.js در پروژه های Nuxt.js خود ادغام کنید.

 

همچنین به همان روشی که از فریم ورک بوت استرپ CSS استفاده می شود استفاده می شود. این منبع باز در Github با حدود 12.9 هزار ستاره و 1.7 هزار فورک است.

 

5. Vuesax

 

Vuesax یک فریم ورک کامپوننت رابط کاربری جدید است که با Vuejs برای ساخت پروژه‌ها به راحتی و با سبکی منحصر به فرد و دلپذیر ایجاد شده است. کاربر نهایی طرح‌ها برای هر جزء منحصربه‌فرد هستند و به هیچ روند بصری یا قوانین طراحی وابسته نیستند، و پروژه‌های ساخته شده با آن را نیز منحصر به فرد می‌کند.

 

صفحات پاسخگو و اجزای رابط کاربری قابل استفاده مجدد و قابل تنظیم را ارائه می دهد. همچنین شروع به کار با استفاده از npm یا CDN آسان است. در حال حاضر از Vue CLI 3 در نسخه اخیر خود پشتیبانی نمی کند. این منبع باز در Github با حدود 4.9 هزار ستاره و 6700 بارگیری هفتگی NPM است.

 

6. Ant Design Vue

 

Ant Design vue بر اساس مشخصات Ant Design، Ant design vue یک کتابخانه UI vue است که شامل مجموعه‌ای از مؤلفه‌ها و نسخه‌های نمایشی با کیفیت بالا برای ساخت رابط‌های کاربری غنی و تعاملی است.

 

Ant-design-vue مؤلفه های رابط کاربری زیادی را برای غنی سازی برنامه های وب شما مانند Skeleton، کشو، آمار و موارد دیگر ارائه می دهد.

 

با انتشار اخیر ant design vue نسخه 2، به‌روزرسانی شده است تا سریع‌تر و آسان‌تر ادغام شود، اندازه بسته‌ای کوچک‌تر باشد، و همچنین از Vue 3، سند API ترکیب جدید پشتیبانی می‌کند. همچنین از مرورگرهای وب مدرن، رندر سمت سرور و الکترون پشتیبانی می کند. بیش از 13 هزار ستاره در Github و 39,693 بارگیری هفتگی NPM دارد.

 

7. کوازار

 

Quasar یکی از بهترین فریم ورک‌های Vue UI است که به توسعه‌دهندگان اجازه می‌دهد از یک پایه کد منبع برای همه پلتفرم‌ها از طریق Quasar CLI با بهترین شیوه‌های خارج از جعبه استفاده کنند. این به توسعه دهندگان این امکان را می دهد که به جای سایر موارد مربوط به آبکاری دیگ بخار (ساخت سیستم، چیدمان) روی محتوای برنامه خود تمرکز کنند. تمرکز آن بر پیروی از دستورالعمل های Material 2.0 است و همچنین دارای یک جامعه بسیار حامی است.

 

یکی از چیزهای خاص در مورد Quasar امکان نوشتن کد یک بار و استقرار همزمان آن به عنوان یک وب سایت، یک برنامه موبایل با استفاده از تنها یک پایگاه کد است. همچنین نسخه جدیدی در حال حاضر در نسخه بتا وجود دارد که از ویژگی های vue 3 پشتیبانی می کند. حدود 17.8 هزار ستاره در Github دارد.

 

8. Buefy

 

Buefy یک کتابخانه مؤلفه رابط کاربری سبک وزن برای Vue JS است که بر اساس Bulma (یک چارچوب CSS) است. Buefy Bulma را با Vue ترکیب می‌کند و به شما کمک می‌کند با استفاده از حداقل کد، برنامه‌های کاربردی زیبا بسازید. این لایه جاوا اسکریپت برای رابط Bulma شما است.

 

می توان آن را به طور کامل یا اجزای منفرد در یک صفحه وب معمولی وارد کرد. ادغام آن در پروژه شما بسیار آسان است، می تواند با استفاده از npm یا CDN انجام شود.

 

Buefy اجزای رابط کاربری، طرح‌بندی و آیکون‌های آماده را فراهم می‌کند. کامپوننت ها می توانند از SASS برای تم شما استفاده کنند. همچنین از مرورگرهای مدرن پشتیبانی می کند.

 

9. Vue Material

 

Vue Material یک چارچوب پرکاربرد و سبک وزن است که مشخصات طراحی مواد را اجرا می کند. این یکی از بهترین ادغام بین مشخصات Vue.js و Material Design است! از طریق یک API آسان می توانید به راحتی آن را پیکربندی کنید تا مطابق با تمام نیازهای شما باشد.

 

این با طراحی واکنشگرا و پشتیبانی از تمام مرورگرهای وب مدرن سازگار است. این کتابخانه به تم ها، مؤلفه ها و عناصر رابط کاربری تقسیم می شود. تم ها راهنمای قطعی در مورد نحوه تم کردن برنامه شما (یا نوشتن تم های خود) را ارائه می دهند و اجزا و عناصر رابط کاربری شامل چیدمان، پیمایش، تایپوگرافی، آیکون ها و 30 جزء دیگر هستند. حدود 9.2 هزار ستاره و 1.1 هزار فورک در Github و 21k + دانلود هفتگی NPM دارد.

 

10. KeenUI

 

KeenUI یک کتابخانه UI سبک وزن vue.js با یک API ساده است که از طراحی متریال گوگل الهام گرفته شده است. رابط کاربری Keen یک چارچوب CSS نیست. بنابراین، شامل سبک‌های یک سیستم شبکه، تایپوگرافی و غیره نمی‌شود. در عوض، تمرکز بر اجزای تعاملی است که به جاوا اسکریپت نیاز دارند.

 

حدود 30 جزء قابل استفاده مجدد دارد. کامپوننت ها با نادیده گرفتن سبک ها با استفاده از متغیرهای SASS قابل تنظیم هستند. می توانید آن را با استفاده از CDN یا npm در پروژه خود ادغام کنید. این منبع باز است و حدود 4k ستاره در Github دارد.

 

نتیجه

 

کتابخانه های مؤلفه UI قطعا ساخت یک پروژه را بسیار آسان تر می کند. انتخاب مناسب به ویژگی های پروژه ای که می خواهید روی آن کار کنید بستگی دارد. قبل از غواصی در یک پروژه جدید، توصیه می شود که کتابخانه مؤلفه UI را که برای این هدف مناسب تر است، مرور کند.