آموزش تبدیل VueJs به NuxtJs در ۸ مرحله.

چند ماه پیش من یک وب سایت را با استفاده از vujs + buefy طراحی کردم و خب همانطوری که می‌دونید vujs spa گزینه خوبی برای seo نیست و این مدل وب سایت‌ها نمیتونن نتایج خوبی را در گوگل به دست بیاورند. در نتیجه من تصمیم گرفتم از فناوری SSR استفاده کنم، برای این کار تصمیم گرفتم کل پروژه را با استفاده از nuxtjs بازنویسی کنم.

از اونجایی که تو اینترنت آموزش شسته رفته‌ای برای این کار پیدا نکردم تصمیم گرفتم به صورت گام به گام تبدیل VueJs به NuxtJs مستند و اینجا به اشتراک بگذارم. (توجه بکنید این کار به صورت حدودی بیشتر از چند ساعت زمان نخواهد برد البته فرض من این هست که شما راجع به nuxt اطلاعات دارید، در نتیجه اگر اطلاعاتی در زمینه ssr و یا نحوه عملکرد nuxt ندارید اول از همه یه سری به مستندات رسمی پروژه nuxt بندازید.)

قدم اول : درست کردن پروژه nuxt

اول از همه، با استفاده از دستور زیر پروژه جدید nuxt ایجاد کنید.

create-nuxt-app 

میتونید اطلاعات بیشتر رو اینجا کسب بکنید.

قدم دوم : انتقال Store ها

اگر شما از vuex در پژوه خودتان استفاده نکرده‌اید میتوانید از این مرحله بگذرید در غیر این صورت شما باید فولدر store را از کپی و به پروژه nuxt خودتون اضافه بکنید. من در پروژه خودم فقط یک فایل index.js داشتم اگر شما store را به ماژول‌های مختلف تبدیل کردید جهت انتقالش از این دستور‌عمل استفاده کنید.

قدم سوم : انتقال component ها

اول از همه نیاز هست ما تفاوت بین کامپونت و صفحه رو بدونیم. من نمی دانم که شما کدام ساختار دایرکتوری استفاده می کنید، اما من در پروژه‌هام معمولاً پرونده های .vue خود را به دو پوشه زیر تقسیم میکنم.

/views

/components

خب من در پوشه views پرونده .vue رو قرار میدهم که شامل صفحهات اصلی سایت من هستن، برای مثال صفحاتی مثل : home, about_us, faq و غیره. در فولدر components هم ساب کامپوننت‌هایی را قرار میدهم که به صورت متدوال در view ها مختلف از اون‌ها استفاده میکنم.

شما هم در پروژه خودتان باید این تمایز رو قائل بشیم و فقط ساب کامپوننت‌های پروژه vuejs خودتون را به پوشه جدید components در پروژه جدید nuxt انتقال بدید. (view ها نباید اینجا منتقل شوند)

قدم چهارم : صفحات خود را بسازید

خب در این قسمت شما باید تمام صفحات خود را با استفاده از هر route در nuxt مجدد بازسازی کنید.

در Nuxt.js به صورت خودکار پیکربندی Vue-Router را بر اساس ساختار پرونده شما از پرونده های Vue درون شاخه صفحات ایجاد می ‌شود و به صورت خودکار پیکربندی Vue-Router را بر اساس ساختار پرونده شما از پرونده های Vue درون فولدر صفحات ایجاد می‌کند.

اگر ایده ای در مورد چگونگی انجام این کار ندارید ، به شما توصیه می کنم بخشهای زیر را در اسناد رسمی Nuxt بخوانید. مستندات routing و مستندات views

قدم پنجم : تغییر router-link به nuxt-link

هنگامی که تمام اجزای و صفحات خود را در محل درست قرار دهید، باید تمامی router-link ها را به nuxt-link تغییر بدهید. جهت این که ببینید چگونه این تغییر نام گذاری را باید انجام بدید یه نگاهی به مسیر زیر بندازید، این مسیر به صورت خودکار در پروژه nuxt شما ایجاد شده .

/.nuxt/router.js

قدم ششم : نحوه واکشی داده ها از سرور خود (API ها) را تغییر دهید

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

ممکن است بخواهید داده ها را واکشی کرده و در سمت سرور ارائه دهید. Nuxt.js یک روش asyncData اضافه ارائه کرده‌است تا به شما اجازه دهد قبل از مقداردهی اولیه م componentلفه ، عملیات async را مدیریت کنید.
جهت کسب اطلاعات بیشتر این مستند را بخوانید.

اگر شما از واکشی داده‌ها در کامپوننت‌ها خود استفاده می‌کنید، به دلیل این که در کامپوننت‌ها متد asyncData وجود ندارد. دریافت داده با استفاده asyncData کار نخواهد کرد. اما هیچ نگران نباشید برای این کار دوتا را حل داریم :

۱- تمام api ها را در mounted صدا کنید. توجه کنید این کار راهکار باعث میشه که اطلاعات سمت سرور شما رندر نشه

۲- تمام api ها با استفاده متد asyncData و یا fetch در صفحه ها صدا کنید و خروجی را به کامپوننت‌هایی که صفحات صدا زدید پاس بدید.

قدم هفتم : پلاگین‌های خود را اضافه کنید.

به فایل main.js در پروژه Vuejs خود بروید پلاگین هایی که استفاده می کنید را شناسایی کنید. بعد تمام پلاگین های خود با استفاده این مستند به nuxt اضافه کنید.

قدم هشتم : منابع خارجی خود را به nuxt اضافه کنید

خب تا اینجا تقریبا بیشتر کار‌ها انجام شده ، در نهایت، اگر از برخی از منابع خارجی در فایل index.html پروژه Vuejs خود استفاده می کنید، (مثل فایل های css , js ) شما می توانید آنها را در Nuxt.Config.js قرار دهید. برا دیدن اطلاعات بیشتر به این مستند سر بزنید.

در نهایت ساختار پوشه های قبلی و جدید ما مثل تصویر زیر میشه.

تبریک میگم اگر همه این مراحل رو به درستی طی کرده باشید، شما الان پروژه خودتون رو از vuejs به nuxt انتقال دادید.

شما میتونید از طریق ایمیل زیر با من در تماس باشید. info@hamkaran.cloud ، خوشحال میشم نظرات شمارو داشته باشم.