پنج ابزار برای توسعه سریع اپلیکیشن های Vue.js – راهنمای کاربردی

مدت زیادی نیست که تعداد ستاره‌های Vue.js در گیت‌هاب از React عبور کرده است. با این که این معیارِ چندان جامعی برای اندازه‌گیری محبوبیت Vue.js نیست، اما شکی نیست که نشان‌دهنده موفقیت و محبوبیت بالای Vue.js در ایجاد جامعه خاص خود در سال 2018 بوده است.

همچنان که ما از فریمورک‌های عالی مانند Vue برای ساخت اپلیکیشن‌های جدید استفاده می‌کنیم، سرعت توسعه نیز به یکی از جنبه‌های مهم کار تبدیل می‌شوند. ساخت اپلیکیشن‌های جذاب، عالی است؛ اما ساخت سریع آن‌ها نیز مهم است. بنابراین در این نوشته برخی ابزارهای مفید برای کمک به توسعه اپلیکیشن‌های Vue.js را معرفی می‌کنیم که به صرفه‌جویی زمانی و ارائه سریع‌تر محصول تولید شده کمک می‌کنند.

1. Bit + Vue

شما با تبدیل کردن کامپوننت‌های خود به بلوک‌های سازنده‌ای که می‌توانند بی‌درنگ به اشتراک گذاشته شده و در همه‌جا استفاده شوند، به افزایش سرعت توسعه اپلیکیشن‌ها، صرفه‌جویی در زمان و ایجاد «مجموعه لِگوهای کامپوننتی» کمک می‌کنید.

Bit امکان جداسازی و اشتراک مستقیم کامپوننت‌ها را از درون پروژه و بدون نیاز به هیچ گونه بازسازی (refactoring) فراهم ساخته است. سپس کامپوننت‌ها در مجموعه بصری قابل جستجو هستند و می‌توانند با استفاده از NPM در هر پروژه‌ای نصب شوند.

Bit همچنین امکان تست و اجرای کامپوننت‌ها به صورت مجزا در کلود را فراهم ساخته و حتی امکان ایمپورت، تغییر و همگام‌سازی کامپوننت‌ها را از درون پروژه‌ای که در آن کار می‌کنید ارائه می‌کند. گردش کاری Bit موجب صرفه‌جویی در زمان و تسهیل اشتراک کد برای کامپوننت‌های ایجاد شده در یک تیم، به خصوص هنگام کار روی پروژه‌های چندگانه می‌شود.

2. StoryBook + Vue

شما از طریق StoryBook می‌توانید کامپوننت‌ها را سریع‌تر و به طور مجزا از اپلیکیشن توسعه دهید و بدین ترتیب «قابلیت استفاده مجدد» (reusability) افزایش می‌یابد. StoryBook را می‌توان با Bit نیز ترکیب کرد تا به سرعت، کامپوننت‌ها را در پروژه‌های مختلف پروتوتایپ کرده و توسعه داد.

همچنین می‌توانید از افزونه‌های مفید زیر استفاده کنید:

• addon-actions
• addon-links
• addon-knobs
• addon-notes

3. Vue devtools

اینک با انتشار نسخه 4 این افزونه، می‌توان داده‌های کامپوننت را مستقیماً در بخش inspector کامپوننت اصلاح کرد. اگر از vue-loader یا Nuxt در پروژه خود استفاده می‌کنید، می‌توانید کامپوننت انتخابی را (به شرط این که کامپوننت تک فایلی باشد) در ویرایشگر کد دلخواه خود باز کنید. دقت کنید که اگر صفحه مورد نظر از نسخه minify شده Vue.js استفاده کند، inspection به صورت پیش‌فرض غیرفعال می‌شود.

4. Vue loader و Vue-CLI

در این بخش دو ابزار Vue-loader و Vue-Cli را بررسی می‌کنیم:

فیلم آموزش طراحی وب‌اپلیکیشن با Vue.js و Laravel در فرادرس

کلیک کنید

Vue-loader

این پروژه امکانات مفیدی مانند استفاده از بارگذارهای Webpack برای بخش‌های مختلف کامپوننت‌ها، برخورد با فایل‌های استاتیک به صورت وابستگی‌های ماژول که باید با بارگذارهای webpack مدیریت شوند، «بارگذاری مجدد بی‌درنگ» (Hot-Reload) در عین حفظ حالت را در طی توسعه و موارد دیگر ارائه می‌کند.

Vue-CLI

Vue-CLI 3 از یک ابزار CLI، سرویس CLI (که بر مبنای Webpack ساخته شده) و یک سیستم افزونه تشکیل یافته است. این پروژه پشتیبانی آماده‌ای از Babel ،TypeScript ،ESLint ،PostCSS ،PWA ،Unit Testing و End-to-end Testing به عمل می‌آورد. سیستم افزونه امکان ساخت و اشتراک راه‌حل‌هایی با قابلیت استفاده مجدد فراهم می‌کند و پروژه بدون نیاز به eject کردن قابلیت پیکربندی دارد.

5. قالب‌ها و boilerplate-ها برای Vue

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

• Webpack / webpack-simple

این یک تنظیمات با امکانات کامل Webpack + vue-loader برای vue-CLI است که امکان بارگذاری مجدد بی‌درنگ، lint کردن، تست و استخراج CSS را دارد. نسخه ساده که برای عرضه در محیط production مناسب نیست، شامل تنظیمات Webpack + vue-loader برای پروتوتایپ سازی سریع است.

• Browserify / browserify-simple

یک محیط Browserify + vueify با امکانات کامل، ویژگی‌های بارگذاری مجدد بی‌درنگ، lint و تست واحد را ارائه می‌کند. این مجموعه شباهت زیادی به webpack-simple دارد. نسخه ساده‌تر این پروژه به صورت Browserify + vueify برای پروتوتایپ سازی سریع مفید است؛ اما برای ساخت پروژه‌های آماده انتشار نهایی مناسب نیست.

• Simple

این boilerplate آن دسته از افرادی را مخاطب قرار داده است که می‌خواهند شروع به کاوش vue بکنند و در عین حال وارد محیط توسعه پیچیده آن نیز نشوند. در واقع این ابزار اساساً نسخه سبکی از یک محیط Vue در یک فایل منفرد HTML است.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• 1۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• 12 نکته کلیدی برای ارزیابی کتابخانه های جدید جاوا اسکریپت
• چگونه برنامه نویس وب شویم؟ – بخش اول: فرانت‌اند (FrontEnd)
• بهینه‌سازی کد‌های جاوا اسکریپت در سال 2۰1۸ — راهنمای جامع

==