آیا می‌خواهید یک پروژه مهم Vue را شروع کنید؟ برای اطمینان از این که با یک پایه محکم شروع می‌کنید، ممکن است از یک Template (یا همان Boilerplate، Skeleton، Starter یا Scaffold) به جای شروع از npm init یا vue init استفاده کنید.
بسیاری از توسعه دهندگان با تجربه، پی برده‌اند که استفاده از الگوهای اوپن سورس برای ساخت یک برنامه با کیفیت Vue عاقلانه است. این الگوها شامل پیکربندی‌های بهینه و ساختار پروژه، بهترین ابزار جانبی و باقی نیازمندی‌های توسعه هستند.
بر خلاف Vue CLI 3 که برای انعطاف پذیری طراحی شده است، الگوها کاملا خودسر هستند. این مسئله مهم است و در نتیجه باید گزینه‌ای که با فلسفه توسعه شما سازگار است را انتخاب کنید.
برخی موارد که باید برای انتخاب یک الگوی Vue در نظر داشته باشید:
- Webpack
- وب‌اپلیکیشن پیش‌رونده
- قابلیت احراز هویت
- سندنگاری خوب
- GraphQL
- آزمایش
- و...
الگوی‌های خوب زیادی برای Vue.js وجود دارند، اما در این مقاله، به ۵ مورد نگاهی خواهیم داشت، که شامل ویژگی‌های مورد نیاز در پروژه‌های جدید هستند.
۱. بهترین مورد برای Webpack
اگر به دنبال یک راه اندازی ساده Wepack هستید، دیگر نیازی نیست فراتر از الگوی Webpack که شامل Vue CLI 2 می‌شود نگاه کنید. این الگو با بیش از ۷۰۰۰ ستاره در گیت‌هاب، توسعه و نگهداری شدن توسط اعضای تیم Vue، بهترین گزنینه برای ساخت یک SPA بر پایه Webpack که شدیدا بهینه‌سازی شده است، می‌باشد.
این الگو از بسیاری ویژگی‌های خوب Webpack و اکوسیستم آن که شامل بارگذاری مجدد قوی، استخراج CSS، خطایابی و البته بارگذاری کامپوننت تک فایلی است، استفاده میکند. این ابزار همچنین شامل پیکربندی‌های جدا که برای توسعه، تولید و حتی آزمایش بهینه‌سازی شده اند، می‌شود.
به عنوان بخشی از CLI 2، این مورد یکی از غیر خود سر ترین موارد است، پس شامل گزینه‌های زیادی مثل رندر سمت سرور نمی‌شود.
اگر الگوی Webpack به نظر شما کمی بیش از حد است، میتوانید از برادر کوچک تر آن، یعنی الگوی Webpack Simple استفاده کنید.
۲. بهترین مورد برای وب‌اپلیکیشن‌های پیش‌رونده
آیا نیاز به تجربه کاربری بهتری برای یک وب‌اپلیکیشن پیش‌رونده دارید؟ Vue Starter یک الگوی SPA ساده برای وب‌اپلیکیشن‌های پیش‌رونده رندر شده توسط سرور است. این ابزار Vuex و Vue Router را به صورت پیکربندی شده در خود دارد، تا بتواند با رندر سمت سرور (SSR) کار کند.
این پروژه بر روی تضمین داشتن رابط کاربری شگفت انگیز در پروژه شما متمرکز است؛ مثلا بین المللی شدن با پشتیبانی از چند زبان مختلف، و داشتن امتیاز ۹۰+ از 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 کاملا سازگار است.
نگذارید ظاهر ساده صفحه پیشفرض این برنامه شما را گول بزند، این برنامه ویژگی‌های زیادی دارد. برخی از موارد مورد علاقه من، قابلیت تست API، وجود Generatorها برای راه‌اندازی کامپوننت‌ها، Viewها و Layoutها هستند.
الگوی Vue Enterprise همچنین از CLI 3 پشتیبانی میکند، پس پروژه می‌تواند به راحتی با پلاگین‌های اضافی CLI 3 گسترش داده شود.
۵. بهترین مورد برای GraphQL
GraphQL در حال حاضر بسیار معروف است، و بسیاری توسعه دهندگان آن را در پروژه‌های Vue جدید خود می‌خواهند. اما الگوهای Vue زیای آن را ندارند، پس اگر GraphQL را می‌خواهید، حتما نگاهی به Vuexpresso داشته باشید.
این پروژه از GraphQL، Apollo و همچنین رابط کاربری GraphQL و یک IDE داخل مرورگری استفاده میکند. به علاوه این موارد، Storybook را نیز برای توسعه تعاملی، آزمایش و کامپوننت‌های UI دارید.
تنها نکته منفی درباره Vuexpresso این است که هنوز جدید است، پس مطمئن شوید که وقت مورد نیاز برای آزمایش هر برنامه‌ای که در آن می‌سازید را دارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید