پنج Boilerplate/Template برای پروژه‌های VueJS

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

آیا می‌خواهید یک پروژه مهم Vue را شروع کنید؟ برای اطمینان از این که با یک پایه محکم شروع می‌کنید، ممکن است از یک Template (یا همان Boilerplate، Skeleton، Starter یا Scaffold) به جای شروع از npm init یا vue init استفاده کنید.

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

vuejs

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

برخی موارد که باید برای انتخاب یک الگوی Vue در نظر داشته باشید:

  • Webpack
  • وب‌اپلیکیشن پیش‌رونده
  • قابلیت احراز هویت
  • سندنگاری خوب
  • GraphQL
  • آزمایش
  • و...

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

۱. بهترین مورد برای Webpack

اگر به دنبال یک راه اندازی ساده Wepack هستید، دیگر نیازی نیست فراتر از الگوی Webpack که شامل Vue CLI 2 می‌شود نگاه کنید. این الگو با بیش از ۷۰۰۰ ستاره در گیت‌هاب، توسعه و نگهداری شدن توسط اعضای تیم Vue، بهترین گزنینه برای ساخت یک SPA بر پایه Webpack که شدیدا بهینه‌سازی شده است، می‌باشد.

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

وبپک در vue

به عنوان بخشی از CLI 2، این مورد یکی از غیر خود سر ترین موارد است، پس شامل گزینه‌های زیادی مثل رندر سمت سرور نمی‌شود.

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

۲. بهترین مورد برای وب‌اپلیکیشن‌های پیش‌رونده

آیا نیاز به تجربه کاربری بهتری برای یک وب‌اپلیکیشن پیش‌رونده دارید؟ Vue Starter یک الگوی SPA ساده برای وب‌اپلیکیشن‌های پیش‌رونده رندر شده توسط سرور است. این ابزار Vuex و Vue Router را به صورت پیکربندی شده در خود دارد، تا بتواند با رندر سمت سرور (SSR) کار کند.

vuejs

این پروژه بر روی تضمین داشتن رابط کاربری شگفت انگیز در پروژه شما متمرکز است؛ مثلا بین المللی شدن با پشتیبانی از چند زبان مختلف، و داشتن امتیاز ۹۰+ از Lighthouse.

به علاوه، ویژگی مدیریت تگ head در سند با به کار گیری از vue-meta برای SEO استفاده می‌شود، و پشتیبانی SSR تضمین میکند که صفحه شما توسط موتورهای جستجو ای که محتویات JavaScript را پشتیبانی می‌کنند، نمایش داده می‌شود.

لینک - دمو

۳. بهترین مورد برای احراز هویت

اگر نیاز به احراز هویت کاربر دارید، نگاهی به Vue Express Mongo Boilerplate داشته باشید. این پروژه یک Boilerlate همه جانبه به همراه احراز هویت شامل ثبت نام کاربر و وارد شدن با شبکه‌های اجتماعی مثل Google، Facebook، Twitter و GitHub را داراست.

بهترین پلاگین برای احراز هویت

این الگو بهترین شیوه‌های امنیت را با استفاده از OAuth 2، Helmet (که header‌های امنیتی HTTP را اضافه می‌کند) و Express Validator به ارمغان می‌آورد. این ابزار همچنین از بسیاری سرویس‌های ورود از راه دور پشتیبانی می‌کند.

برای دیتابیس‌ها نیز، MongoDB به همراه Mongoose قرار داده شده است.

لینک - دمو

نکته: اگر می‌خواهید از لاراول برای احراز هویت برنامه Vue استفاده کنید، از الگوی Laravel Vue Boilerplate که ویژگی‌های مشابهی دارد استفاده کنید.

۴. بهترین مورد برای سندنگاری

جایی که بسیاری از الگوها ضعف خود را در آن نشان می‌دهند، عدم وجود سندنگاری است؛ اما نه در Enterprise Boilerplate. این پروژه توسط Chris Fritz که بسیاری از سندنگاری‌های Vue را ساخته است، ساخته شده و نگهداری می‌شود، پس با نمونه‌های مختلف Vue کاملا سازگار است.

vuejs بهترین پلاگین برای سندنگاری

نگذارید ظاهر ساده صفحه پیشفرض این برنامه شما را گول بزند، این برنامه ویژگی‌های زیادی دارد. برخی از موارد مورد علاقه من، قابلیت تست API، وجود Generatorها برای راه‌اندازی کامپوننت‌ها، Viewها و Layoutها هستند.

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

لینک

۵. بهترین مورد برای GraphQL

GraphQL در حال حاضر بسیار معروف است، و بسیاری توسعه دهندگان آن را در پروژه‌های Vue جدید خود می‌خواهند. اما الگوهای Vue زیای آن را ندارند، پس اگر GraphQL را می‌خواهید،‌ حتما نگاهی به Vuexpresso داشته باشید.

بهترین پلاگین برای GraphQL

این پروژه از GraphQL، Apollo و همچنین رابط کاربری GraphQL و یک IDE داخل مرورگری استفاده می‌کند. به علاوه این موارد، Storybook را نیز برای توسعه تعاملی، آزمایش و کامپوننت‌های UI دارید.

تنها نکته منفی درباره Vuexpresso این است که هنوز جدید است، پس مطمئن شوید که وقت مورد نیاز برای آزمایش هر برنامه‌ای که در آن می‌سازید را دارید.

لینک

منبع

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

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

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

مدل پنجره ای SVG

امروز قصد دارم ساخت یک پنجره ساده بهمراه یک پس زمینه Svg متحرک رو بهتون یاد بدم . ما به تازگی تجربه ای در ساخت انیمیشن های svg با ارائه این پست داشتیم...

چگونه با استفاده از Meteor و Vuejs یک پیشخوان بلادرنگ ایجاد کنیم؟

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

پیاده‌سازی احراز هویت در یک برنامه Nuxt.js

در این آموزش، نحوه پیاده‌سازی احراز هویت در یک برنامه Nuxt.js با استفاده از ماژول Auth را به شما نشان خواهم داد. دقت کنید که برای این آموزش، از JWT بر...