5 پلاگین Vue CLI 3 برای پروژه‌های Vue

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 07 دی 1397
دسته بندی ها : vuejs

اگر خبرش به گوشتان نرسیده است، Evan You، سازنده Vue اخیرا انتشار Vue CLI 3 را پس از ماه‌ها کار سخت اعلام کرد.

یکی از بهترین نکات درباره Vue CLI 3 جدید، این است که چقدر قابل گسترش می‌باشد. توسعه دهندگان نسخه جدید را از روز اول با داشتن یک معماری پلاگین در ذهن شروع کردند. این یعنی شما به راحتی می‌توانید وقتی که پروژه خود را می‌سازید یا حتی بعد از آن، یک پلاگین را به آن اضافه کنید.

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

قبل از شروع، بیایید به صورت خلاصه یک پلاگین Vue CLI را بررسی کنیم.

چه چیزی در یک پلاگین Vue CLI قرار دارد؟

یک پلاگین Vue CLI، فقط یک پکیج npm است. پلاگین‌ها می‌توانند پیکربندی داخلی webpack را تغییر داده، و دستورات را به vue-cli-service تزریق کنند، که شما را قادر میسازد تا این دستورات را مستقیما از ترمینال اجرا کنید. اکثر امکاناتی که در طی روند ساخت پروژه لیست می‌شوند، به عنوان پلاگین‌ها پیاده‌سازی می‌شوند.

حال به سراغ ۵ پلاگین Vue CLI که می‌توانید در پروژه‌های خود استفاده کنید می‌رویم.

۱) Electron Builder

این پلاگین شما را قادر می‌سازد تا یک نسخه میان پلتفرمی Electron (فریم‌وورک JavaScript) از برنامه خود، بدون نیاز به هیچ‌گونه پیکربندی اضافی ایجاد کنید.

برای اضافه کردن این پلاگین به پروژه Vue خود، این دستور را اجرا کنید:

vue add electron-builder

همین! شما آماده‌اید.

نکته: این پلاگین با Vue CLI 2 کار نمی‌کند، و اگر از یک نسخه قدیمی‌تر این پلاگین استفاده کرده‌اید، برخی هشدارهای دیگر هم هستند که باید در نظر بگیرید.

۲) Apollo

این پلاگین، پلاگینی برای اضافه کردن Apollo و GraphQL به پروژه Vue خود است. GraphQL مشخصه‌ای است که در هدف دارد تا ارتباط بین frontendها و backendها را ساده‌تر کند.

این پلاگین ساخته Guillaume Chau، یک عضو هسته‌ای Vue.js که همچنین پشت ساخت Vue UI هم حضور دارد، می‌باشد.

برای اضافه کردن پلاگین Apollo به پروژه خود، این دستور را اجرا کنید:

vue add Apollo

۳) Vuetify

کتابخانه رابط کاربری Vuetfy معروف هم تبدیل به یک پلاگین Vue CLI 3 شده است. اگر با آن آشنا نیستید، Vuetify یک فریم‌وورک کامپوننت معنایی برای Vue است. این فریم‌وورک در هدف دارد که کامپوننت‌های مرتب، معنایی و با قابلیت استفاده مجدد را فراهم کند که ساخت برنامه شما را بسیار ساده می‌کنند.

برای اضافه کردن این پلاگین به پروژه خود، این دستور را اجرا کنید:

vue add vuetify

۴) Storybook

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

برای اضافه کردن پلاگین، این دستور را اجرا کنید:

vue add storybook

۵) Component ساخته David Desmaisons

اگر می‌خواهید پلاگین CLI خود را منتشر کنید تا برای توسعه دهندگان دیگر هم قابل استفاده باشد، این پلاگین باید با پیروی از قرارداد نام vue-cli-plugin-<name> بر روی npm‌ منتشر شود.

Component، ساخته David Desmaisons این کار را ساده‌تر می‌کنند. این پلاگین حتی کامپوننت مورد نظر را به طور خودکار و با استفاده از vue-styleguidist و vuedoc.md سندنگاری می‌کند.

برای نصب این پلاگین، دستور زیر را اجرا کنید:

vue add component

نتیجه گیری

یکی از اولین نکات درباره پلاگین‌های Vue CLI 3 که متوجه‌اش خواهید شد، سادگی نصب آن‌ها است.

vue add plugin-name

این تمام چیزی است که برای اضافه کردن مقدار زیادی عملکرد به برنامه خود نیاز دارید.

از آنجایی که Vue CLI 3 جدید است، پلاگین‌های زیادی در زمان نوشتن این مقاله وجود ندارند. اما حتی با این ۵ پلاگین هم می‌توانید ببینید که این پلاگین‌ها چقدر در کمک به شما برای ساخت یک برنامه زیبا، قدرتمند هستند. آن‌ها در آینده حتی‌ قوی‌تر هم خواهند شد.

مقاله مرتبط:

منبع

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

مقدمه‌ای بر Vuex و دسترسی به state

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

چگونه با استفاده از Vue، اپلیکیشن‌های Native را راه‌اندازی کرده، بسازیم و گسترش دهیم؟

Vue-Native یک فریم‌وورک است، که توسط شرکت GreekyAnts ساخته شده است. این فریم‌وورک با این هدف ساخته شده است تا برنامه‌های موبایل میان پلتفرمی را به شما...

توصیف Vuex به صورت بصری

مدیریت state در یک برنامه پر از کامپوننت، می‌تواند سخت باشد. Facebook به سخت‌ترین روش با این مسئله رو به رو شد و الگوی Flux را به وجود آورد، که این ال...

مقدمه‌ای سریع بر Vuejs

برای شروع کار با Vuejs شما نیاز دارید که به خوبی HTML، CSS و Javascript را درک کنید. خب بعد از این موارد شما آماده یادگیری ویوجی‌اس خواهید بود