۹ کتابخانه Vue.js که زندگی را برای شما آسان‌تر می‌کند

ترجمه و تالیف : علیرضا معمارزاده
تاریخ انتشار : 27 اسفند 98
خواندن در 3 دقیقه
دسته بندی ها : کتابخانه

من در این مقاله از سایت راکت لیستی از کتابخانه‌های Vue.js که توسعه‌دهندگان دنیای مدرن امروزی باید در مورد آن بدانند، را جمع‌آوری کردم و در این مقاله به ارائه می‌دهم.

به روز بودن همراه با تمام روندهای پیرامونی اکوسیستم Vue دشوار است. پروژه‌ها با سرعت بالایی درحال توسعه هستند. و پروژه‌های جدید روزانه در حال شکوفایی و پدیدار شدن هستند. فراموش کردن برخی از کتابخانه‌های بزرگ که در اکوسیستم Vue قابل دسترس هستند امری بدیهی است.

چه شما یک توسعه دهنده‌ی فرانت‌اند باشید و چه شما یک تازه کار در Vue باشید، در حال تلاش برای بهبود زندگی خود به‌عنوان یک توسعه‌دهنده به آسان‌ترین روش ممکن هستید. به همین دلیل ما در حال بررسی نه کتابخانه Vue هستیم که هر توسعه‌دهنده امروزی باید از آن مطلع باشد.

۱. Vue-Lazyload

Vue-Lazyload یک کتابخانه عظیم برای بارگذاری عکس‌ها و سایر محتویات است.

Lazyload یک روش برنامه‌نویسی است که شما فقط موضوع را در ابتدا که به آن نیاز دارید بارگذاری یا تنظیم می‌کنید. در توسعه شبکه Lazyload اغلب برای بارگذاری تصویر قبل از ورود آن به قسمت viewport استفاده می‌شود.

این عمل به طور بالقوه می‌تواند باعث عملکرد بهتر شما شود مخصوصاً اگر شما تعداد زیادی تصویر در اپلیکیشن خود داشته باشید.

کتابخانه lazyload همچنین برای بارگذاری آسان محتویات با استفاده از lazy container ممکن است که بارگذاری گروهی تصاویر در یک محیط را امکان‌پذیر می‌سازد.

Vue-Lazyload با داشتن بیش از ۵ هزار ستاره در GitHub یک کتابخانه محبوب است که امکان Lazyload را برای شما فراهم می‌سازد.

۲. vue-head

کتابخانه vue-head دستکاری اطلاعات در تگ head را امکان‌پذیر می‌کند. 

با اضافه کردن یک head برای محتویات، شما می‌توانید به‌عنوان مثال، عنوان هر صفحه را تغییر دهید. این کتابخانه همچنین به شدت برای افزودن تگ‌های متا دیتا برای بهبود برنامه در قسمت موتورهای جستجو (SEO) بسیار مفید است.

کتابخانه vue-head همچنین هزار ستاره در GitHub دارد و تقریباً چند سال است که مورد استفاده قرار گرفته است.

۳. BootstrapVue

کتابخانه BootstrapVue به خوبی توسط نام خود تعریف شده است. محتویات BootstrapVue با Bootstrap.Vue ساخته شده است که متن‌باز بوده و برای توسعه با کمک  HTMLو CSS و JS است. این یکی از چارچوب‌های فرانت‌اند محبوب در جهان است.

نکته جالب در مورد BootstrapVue این است که این کتابخانه، یکی از روش‌های اجرایی جامع در در محتویات Bootstrap ورژن ۴.۳ و سیستم شبکه Vue.js است، که شامل دسترسی گسترده و خودکار WAI-ARIA است.

این کتابخانه برای ساخت برنامه‌های کاربردی رسپانسیو مناسب است؛ که دلیلی برای انتخاب گسترده آن به عنوان پایه UI برای اپلیکیشن Vue.js شما است.

۴. Vue-multiselect

اگر به امکاناتی بیش از استانداردهای HTML نیاز دارید کتابخانه Vue-multiselect روشی است که می‌توانید از آن بهره بگیرید.

علاوه بر انتخاب معمول واحد، این کتابخانه همچنین چندین گزینه‌ی انتخاب ناهمگام، برچسب زنی، توانایی جستجو در میان گزینه‌ها و موارد دیگر را برای شما پیشنهاد می‌کند.

این کتابخانه پیکربندی سفارشی را ممکن می‌سازد که آن را بسیار قابل تنظیم می‌کند. اگر شما نیاز به دسته‌بندی و یا انتخاب در اپلیکیشن خود را دارید من به شدت این کتابخانه را به شما توصیه می‌کنم.

این کتابخانه تقریبا ۵ هزار ستاره در GitHub دارد و طبق همین وبسایت، محتملاً یک راه‌حل انتخابی تقریباً کامل برای Vue.js بدون jQuery است. 

۵. Element UI

یکی دیگر از ابزارهای محبوب  Element UI است؛ که ۴۰ هزار ستاره در GitHub دارد. ابزار Element UI مطلقاً در این لیست قرار دارد. یکی از پروژه‌های محبوب در اکوسیستم Vue.js می‌باشد که تنوع گسترده‌ای از محتویات UI را فراهم می‌سازد.

این ابزار پشتیبانی بالایی از مرورگرها دارد: مرورگرهای مدرن و اینترنت اکسپلورر ورژن ۱۰ به بالا را پشتیبانی می‌کند.

این کتابخانه کامپوننت‌ها بسیاری دارد که حوصله لیست کردن آن‌ها در این مقاله نمی‌گنجد، بنابراین به شما پیشنهاد می‌کنم خودتان ابزار Element UI را بررسی کنید.

۶. Vuelidate

Vuelidate کتابخانه‌ای است که اعتبارسنجی ساده، سبک، مبتنی بر مدل را برای Vue.js فراهم می‌سازد. اگرچه کتابخانه‌های بسیار ساده‌تری در اکوسیستم Vue.js وجود دارد یک تفاوت بسیار بزرگ در بین این کتابخانه‌ها و vuelidate وجود دارد.

بیش‌تر کتابخانه‌های دیگر، شما را به نوشتن قوانین اعتبارسنجی طبق الگوها نیازمند می‌سازند. که این امر منجر به ایجاد اشتباهات زیاد در نمونه شما می‌شود. همچنین می‌توان استدلال کرد که قالب‌ها (الگوها) بهترین مکان برای تعریف منطق اپلیکیشن نیستند. اعتبارسنجی در vuelidate کاملاً از قالب‌ها جداست.

اگر با مشکلی در اعتبارسنجی چارچوب فرم مشتری خود برخوردید به شدت به شما توصیه می‌کنم که بروید و به vuelidate سر بزنید.

۷. Vue.Draggable

هنگامی که برای اپلیکیشن خود نیاز به عمل کشیدن و رهاکردن (drag & drop) دارید دیگر نیاز نیست به دنبال چیزی فراتر از Vue.Draggable بگردید.

این کتابخانه بر پایه‌ی Sortable.js است و تمام ویژگی های آن را به نمایش می‌گذارد. Vue.Draggable به شما کمک می‌کند تا روابط پیچیده‌ای از drag & drop را انجام دهید و بر روی برهم‌کنش و تعامل drag & drop متمرکز شوید. همچنین جنبه‌های بصری را به خودتان واگذار می‌کند.

این کتابخانه از دستگاه‌های لمسی نیز پشتیبانی می‌کند و هیچ وابستگی به jQuery ندارد.

۸. Vue Apollo

امروزه GraphQL جز پرطرفدارترین‌هاست. اگر از Vue.js استفاده می‌کنید و همچنین می‌خواهید به GraphQL جهش کنید خبرهای خوبی برای شما دارم.

کتابخانه Vue Apollo استفاده از Vue.js و GraphQL را راحت و رضایت بخش می‌سازد.

اگر شما هم‌اکنون با GraphQL وApollo  آشنا هستید دیگر برای راه‌اندازی و کارکردن با آن کار دشواری ندارید. اگر می‌خواهید از GraphQL در اپلیکیشن خود استفاده کنید؛ این کتابخانه ضروری است.

۹. Vue-i18n

اگر نیاز به برنامه‌ی چند زبانه دارید مطمئنا به کتابخانه Vue-i۱۸n احتیاج دارید.

Vue-i۱۸n یک افزونه قدرتمند بین‌المللی بر پایه‌ی i۱۸next برای Vue.js می‌باشد. این کتابخانه یک راه‌حل کامل برای بومی سازی محصولات خود از وب گرفته تا موبایل و دسکتاپ را برای شما فراهم می‌سازد.

مهم‌تر از همه، این کتابخانه کامپوننت‌ محور است به این معنی که شما می‌توانید پیغام‌های محلی را در یک فایل کامپوننت مدیریت کنید.

مبنع

گردآوری و تالیف علیرضا معمارزاده

Student of Software Engineering, python Developer, i love programming and game