۵ ابزار برای توسعه سریع‌تر در Vue.js

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 16 شهریور 1397
دسته بندی ها : جاوا اسکریپت

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

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

بنابراین با چنین استدلالی امروز در این مطلب قصد داریم شما را با ۵ ابزار ویوجی‌اس آشنا کنیم که در روند ارائه پروژه به شما می‌کنند و زمان بسیاری را برای شما ذخیره می‌نمایند. جدای از این موارد اگر شما نیز ابزاری را می‌شناسید می‌توانید در قسمت کامنت‌ها آن را با ما به اشتراک بگذارید.

1. Bit + Vue

Bit یک ابزار متن باز است که کامپوننت‌ها را در بلاک‌های ایزوله شده قرار می‌دهد. چنین بلاک‌هایی را می‌توان در اپلیکیشن‌های دیگری به اشتراک گذاشت، استفاده کرد و توسعه داد.

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

Bit محیط کاری یکپارچه‌ای دارد و در آن برای نصب کامپوننت‌ها می‌توان از NPM/Yarn استفاده کرد. همچنین به شما قابلیت ایجاد و تست کامپوننت‌ها را به صورت ایزوله شده در کلود می‌دهد. چنین حالتی در سریع کردن روند توسعه و استفاده مجدد از کامپوننت‌های‌تان در پروژه‌های مختلف به شما کمک بسیاری می‌کند.

2. StoryBook + Vue

StoryBook محیط توسعه سریعی برای کامپوننت‌های رابط کاربری را در اختیار شما قرار می‌دهد. از طریق این محیط می‌توانید کتابخانه‌های مربوط به کامپوننت را جستجو کنید، کامپوننت‌های مختلف رابط کاربری را مشاهده کنید و … .

از طریق StoryBook می‌توانید کامپوننت‌ها را به صورت ایزوله شده در سریع‌ترین زمان ممکن توسعه دهید. همچنین قابلیت استفاده مجدد را برای آن‌ها در اختیار دارید. می‌توانید StoryBook را با Bit نیز ترکیب کنید، انجام چنین کاری در ایجاد نمونه‌سازی و توسعه کامپوننت‌ها در پروژه‌های مختلف تاثیر مثبتی می گذارد. 

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

addon-actionsaddon-linksaddon-knobsaddon-notes

3. Vue dev-tools

Vue-devtools یک افزونه کروم/فایرفاکس برای دیباگ کردن پروژه‌های ویوجی‌اس است. می‌توانید این ابزار را با Vuex نیز ترکیب کنید. 

با انتشار نسخه چهارم این افزونه حال می‌توانید داده‌های مربوط به کامپوننت‌های‌تان را به صورت مستقیم از پنل Component inspector تغییر دهید. اگر از vue-loader و یا Nuxt در پروژه‌تان استفاده می‌کنید، حال می‌توانید کامپوننت‌های انتخاب شده را در ادیتور محبوب‌تان باز نمایید.

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

4. Vue loader and Vue-CLI

Vue-loader

Vue-loader یک بارگذار برای وب‌پک به حساب می‌آید که به شما اجازه می‌دهد تا کامپوننت‌های‌تان را در قالبی با نام SFC یا کامپوننت تک فایل بنویسید. ترکیب وب‌پک و Vue-loader به شما روند کار سریع‌تری را برای توسعه اپلیکیشن‌های ویوجی‌اس می‌دهد.

این پروژه ویژگی های مفیدی مانند استفاده از لودرهای وب‌پک مختلف برای قسمت‌های متفاوت از کامپوننت‌های‌تان، hot-reloading و… را برای‌تان فراهم می‌کند.

Vue-CLI

این مورد که حال در نسخه سوم منتشر می‌شود، ابزار استانداردی برای توسعه اپلیکیشن‌های ویوجی‌اس به حساب می‌آید. وجود یک ساختار پلاگین مانند در این ابزار به شما این توانایی را می‌دهد تا بتوانید راه‌حل‌هایی با قابلیت استفاده مجدد را برای پروژه‌های مختلف بنویسید. همچنین ویژگی‌های دیگری مانند پشتیبانی از Babel، Typescrip، ESLint و… در این پروژه پیاده‌سازی شده است.

5. قالب‌های Vue

برای اینکه پروژه‌تان را به صورت سریع ایجاد کنید و در ابتدای مسیر درگیر مسائل مختلفی نشوید، ویوجی‌اس به صورت پیشفرض یکسری قالب‌ها را ارائه می‌کند. به نظر می‌رسد که این مورد می‌توان به صورت بسیار مؤثر و مثبتی روی بهینه کردن زمان ارائه یک پروژه تاثیر داشته باشد. در زیر می‌توانید چند مثال از این قالب‌ها را همراه با پیکربندی‌های منحصر به فردشان مشاهده کنید:

pwa, vue-starter, vue-enterprise-boilerplate, vue-express-mongo-boilerplate, vuexpresso, Browserify / browserify-simple, Simple, Webpack / webpack-simple

منبع

مقالات پیشنهادی

۵ ابزار برای توسعه سریع‌تر در ری‌اکت

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

100 منبع و ابزار عالی برای توسعه‌دهندگان وب – بخش دوم

در بخش اول این مطلب ما ابزارها و منابع مربوط به «کتابخانه‌های جاوااسکریپت»، «فریمورک‌های فرانت-اند»، «فریمورک‌های وب اپلیکیشن»، «اجرا کننده‌های وظایف...

۱۹ ابزار توسعه وب ضروری

اگر شروع به انجام توسعه وب کرده اید مطمئنا شگفت زده خواهید شد که ببینید چه ابزارهایی را باید استفاده کنید. با وجود آنکه تعداد ابزارهای این زمینه بسیار...

9 چیزی که راجع به ابزار توسعه فایرفاکس نمی‌دانید

چند سالی بود که از کاربران کروم بودم، اما جدیدا تصمیم گرفته‌ام که به مرورگر فایرفاکس برگردم. زمانی که من از فایرفاکس استفاده می‌کردم همه چیز مربوط به...