اگر به آگهی‌های استخدامی در ایران یا سایر کشورها نگاه کنید، مشاهده می‌کنید که Vue در بیشتر آگهی‌های مرتبط با توسعه وب قید شده است. چرا Vue.js به چنین سطح از موفقیتی دست پیدا کرد؟ یادگیری راحت، ساختار عملکردی شفاف و مستندات عالی باعث شده‌اند افراد تازه‌وارد به دنیای وب چهارچوب فوق را انتخاب کرده و توسعهدهندگان با تجربه‌تر نیز به تدریج چهارچوب فوق را جایگزین React یا Angular کنند. در این مقاله با ده نمونه از معروف‌ترین ابزارها و کتابخانه‌هایی که در پروژه‌های Vue.js استفاده می‌شوند آشنا خواهید شد.
. Vue CLI
به نظر می‌رسد این روزها داشتن نوعی ابزار رابط خط فرمان (CLI) برای چهارچوب‌های اپلیکیشن جاوااسکریپت ضروری است. Vue نیز از این قائده مستثنا نیست. (/Vue CLI (https://cli.vuejs.org یک مجموعه ابزار کامل برای توسعه سریع Vue است. علاوه بر چهارچوب معمول ساخت یک پروژه، این ابزار اجازه می‌دهد تا ایده‌های تازه خود را با استفاده از قابلیت نمونه‌سازی فوری حتا بدون ساخت یک پروژه کامل به اجرا بگذارید. به‌طور پیش‌فرض، Vue CLI پشتیبانی از ابزارهای توسعه وب و فناوری‌هایی نظیر Babel، TypeScript، ESLint، PostCSS، PWA، Jest، Mocha، Cypress و Nightwatch را امکان‌پذیر می‌کند. چنین امکاناتی به پشتوانه سیستم پلاگین گسترش‌پذیر این ابزار میسر شده است. توسعهدهندگان می‌توانند پلاگین‌های قابل استفاده مجدد را ایجاد کرده و با سایرین به‌اشتراک بگذارند. یکی دیگر از ویژگی‌های برجسته این ابزار رابط کاربری گرافیکی (GUI) قدرتمند آن است که اجازه می‌دهد پروژه خود را به راحتی ایجاد کرده و بدون نیاز به کار اضافه آن‌را پیکربندی و مدیریت کنید.
. VuePress
بازیگر مطرح بعدی در اکوسیستم Vue ابزار ایجاد سایت ایستا (/VuePress (https://v1.vuepress.vuejs.org است که در ابتدا به‌عنوان یک ابزار برای نوشتن مستندات فنی ساخته شد. اکنون ابزار فوق به یک سامانه مدیریت محتوا (CMS) کوچک و قدرتمند تبدیل شده است. از نسخه ۱.x امکاناتی برای ساخت وبلاگ و یک سیستم پلاگین قدرتمند به آن اضافه شده است. این CMS یک قالب پیش‌فرض (متناسب با مستندات فنی) دارد، اما می‌توانید قالب‌های سفارشی خود را ایجاد کنید یا گزینه‌های ساخته شده توسط دیگران را استفاده کنید. در VuePress محتوا را در قالب Markdown می‌نویسید که بعدا به فایل‌های ایستا HTML تغییر شکل می‌دهد. بعد از این‌که فایل‌ها بارگیری شدند، سایت به عنوان یک برنامه تک صفحه‌ای نیرو گرفته از Vue، Vue Router و Webpack اجرا می‌شود. یکی از مزایای اصلی VuePress این است که می‌توانید کدهای Vue را به فایل‌های Markdown ضمیمه تا سایت را شبیه به یک برنامه عادیVue طراحی کرده و از تمام مزایای موجود استفاده کنید.
۳. Gridsome
(/Gridsome (https://gridsome.org شباهت زیادی به VuePress دارد، اما در زمان کار با منابع داده‌ای عملکرد بهتری دارد. این ابزار اجازه می‌دهد انواع مختلفی از داده‌ها را به یک برنامه متصل کرده و از آن‌ها به عنوان یک لایهGraphQL واحد استفاده کنید. در حالت کلی Gridsome از Vue در ارتباط با فرانت‌اند و از GraphQL برای مدیریت داده استفاده می‌کند. عملکرد این ابزار را می‌توان در سه مرحله خلاصه کرد:
- محتوا را با فرمت داده Markdown، JSON، YAML یا CVS فراهم می‌کنید یا آن‌را از یک سامانه مدیریت محتوا مثل وردپرس یا دروپال وارد می‌کنید.
- این محتوا به لایه GraphQL تبدیل می‌شود که امکان مدیریت متمرکز داده را فراهم می‌کند. سپس از این داده‌ها برای ساخت اپلیکیشن خود با Vue استفاده می‌کنید.
- فایل‌های HTML از پیش رندر شده را به میزبان وب ایستا یا شبکه‌های تحویل محتوا شبیه به Netlify، Amazon S3، Now.sh، Surge.sh و غیره منتقل می‌کنید.
قابلیت‌ها و امکانات جالب توجه دیگری همچون تقسیم کد، بهینه‌سازی اجزای تشکیل‌دهنده و پیش‌نمایش لینک توسط Gridsome ارائه شده که به خوبی استانداردهای بهینه‌سازی موتورهای جستجو (SEO) را رعایت می‌کند.
۴. Vuex
مدیریت وضعیت یک یا چند کنترل رابط کاربری یکی از عمده‌ترین مشکلاتی است که توسعهدهندگان در ساخت اپلیکیشن‌های وب با آن مواجه هستند. برای برطرف کردن این مشکل Vue یک سیستم مدیریت وضعیت به‌نام (/Vuex (https://vuex.vuejs.org دارد که به عنوان یک محل ذخیره‌سازی برای تمام اجزای یک برنامه استفاده می‌شود. یک store نوعی شی ویژه است که به چهار بخش تقسیم می‌شود:
- State – یک شی که داده‌های اپلیکیشن را ذخیره می‌کند.
- Getters – یک شی شامل متدهای استفاده شده برای دسترسی به state
- Mutations – یک شی شامل متدهایی که مستقیما روی state تاثیر می‌گذارند
- Actions – یک شی شامل متدهای استفاده شده برای فعال کردن تغییرات و اجرای کد غیر همزمان
برای استفاده ساده‌تر از این store می‌توان آن‌را به چند ماژول تقسیم‌بندی و با توجه به نیاز پروژه یکی از آن‌ها را انتخاب کرد.
۵. Nuxt
وقتی درباره استفاده از رندرینگ سمت سرور (SSR) صحبت می‌کنیم، (/Nuxt (https://nuxtjs.org یک ابزار مفید و کاربردی است. یک چهارچوب ساده و سر راست که برای ساخت برنامه‌های عمومی استفاده می‌شود. Nuxt ماژولار هست، بنابراین می‌توانید تنها ماژول‌هایی که برای برنامه خود نیاز دارید را استفاده کنید. با Nuxt می‌توانید برنامه‌های سمت سرور، برنامه‌های تک صفحه‌ای (SPA) و برنامه‌های وب پیش‌رونده (PWA) را تولید کنید یا تنها از Nuxt برای ساخت یک سایت ایستا استفاده کنید. به‌طور خلاصه، Nuxt شما را از کار خسته کننده در ساخت و بهینه‌سازی برنامه‌ها نجات می‌دهد و یک تجربه توسعه ساده و لذت‌بخش ارائه می‌کند.
۶. Vuetify
(/Vuetify (https://vuetifyjs.com/en یکی از بهترین کتابخانه‌های رابط کاربری است که مجموعه بزرگی از مولفه‌های از پیش ساخته شده (بیشتر از ۸۰ عدد) مبتنی بر طراحی Material Design را ارائه می‌کند و می‌تواند تقریبا نیاز هر نوع اپلیکیشنی را برآورده کند. شما می‌توانید از این کتابخانه برای ساخت اپلیکیشن‌های سمت سرور، اپلیکیشن‌های تک صفحه‌ای (SPA)، اپلیکیشن وب‌پیش‌رونده (PWA) و اپلیکیشن‌های موبایل استفاده کنید. قالب‌های همراه این کتابخانه به صورت رایگان و حرفه‌ای و غیر رایگان ارائه می‌شوند، هر چند می‌توانید قالب‌های اختصاصی خود را ایجاد کنید.
Vuetify همچنین از یک سیستم انتخاب و استفاده از مولفه‌های خاص برخوردار است که حجم نهایی یک برنامه را به میزان قابل ملاحظه‌ای کاهش می‌دهد.
۷. Quasar
(/Quasar (https://quasar.dev نسخه‌ای از جاوا اسکریپت با فلسفه یکبار بنویس، همه جا اجرا کن است. یک چارچوب عمومی و نیرو گرفته از Vue که اجازه می‌دهد اپلیکیشن‌های خود را برای پلتفرم‌های مختلف با یک کد مبنا ایجاد کنید. این چارچوب امکان ساخت اپلیکیشن‌های سمت سرور، اپلیکیشن‌های تک صفحه‌ای (SPA)، اپلیکیشن وب پیش‌رونده (PWA) و اپلیکیشن‌های موبایل و حتا اپلیکیشن‌های چند پلتفرمی دسکتاپ را نیز فراهم می‌کند.
مستندات و راهنمای کار با Quasar جامع و کامل است و مجموعه عظیمی از مولفه‌های مفید و کاربردی همراه این چهارچوب عرضه می‌شود. همچنین یک ابزار CLI برای کمک به ساخت بی دردسر پروژه‌های جدید همراه این چهارچوب است.
۸. Storybook
(/Vue Storybook (https://storybook.js.org به شما اجازه می‌دهد تا مولفه‌های رابط کاربری را در یک محیط ساده و راحت توسعه داده، مدیریت کرده یا آزمایش کنید.
Storybook توسعهدهندگان را قادر می‌سازد تا مولفه‌های مختلف را مستقل از اپلیکیشن اصلی ایجاد کرده و بدون نگرانی در مورد وابستگی‌ها و الزامات خاص یک اپلیکیشن آن‌ها را به صورت تعاملی در یک محیط توسعه مجزا به نمایش بگذارند. Storybook تعداد زیادی افزونه به علاوه یک API انعطاف‌پذیر برای سفارشی‌سازی محیط ارائه می‌کند. شما می‌توانید از پروژه خود به صورت یک اپلیکیشن وب ایستا خروجی گرفته و آن‌را روی هر نوع سرور HTTP مستقر کنید.
. Vue Apollo
اخیرا سرو صدای زیادی پیرامون GraphQL به راه افتاده است. این فناوری از یک زبان Schema برای سرور و یک Query Language برای کلاینت تشکیل شده و تعامل بین فرانت‌اند و بک‌اند را ساده می‌کند. بنابراین اگر از قبل با آن آشنا هستید و می‌خواهید آن‌را با Vue یکپارچه کنید، بهتر است نگاهی به Vue Apollo https://vue-apollo.netlify.com بیاندازید. این کتابخانه استفاده همزمان از Vue و GraphQL/Apollo را سریع و آسان می‌کند.
۱۰. Eagle.js
(/Eagle.js (https://github.com/zulko/eagle.js یک ابزار قدرتمند، انعطاف‌پذیر و منحصر به فرد است که توسط Vue ساخته شده است. این ابزار اجازه می‌دهد مولفه‌های رابط کاربری، اسلایدها و عناصر مورد نیاز برای ارائه پروژه‌های خود را آماده کرده و به دفعات از آن استفاده کنید. Eagle همچنین از انیمیشن‌ها، قالب‌‌ها و ابزارک‌های تعاملی پشتیبانی می‌کند که برای ساخت نسخه‌های نمایشی وب عالی هستند. این سیستم یک API ساده و قابل ویرایش دارد که آزادی عمل کامل برای ساخت اسلایدشوها را ارائه می‌کند.
یکی از بزرگ‌ترین کارهایی که با این کتابخانه می‌توانید انجام دهید قرار دادن یک اسلاید در یک فایل جداگانه و استفاده مجدد از آن در سایر اسلایدشوها است.
منبع:شبکه-مگ
