سلام، این اولین پست من در سال جدید هست. خب باید بگم به عنوان عضوی از جامعه اوپن سورس و جامعه برنامه نویسان با اکثر لایبرری ها و فریم ورک ها کار میکنم، از React گرفته تا Angular، Ruby on rails، Express، Next و البته NodeJS که از همه اینا که بگذریم من به شخصه از ساختار VueJs خوشم میاد. یه ساختار قابل فهم، آسون و تمیز. این تمیزی به حدی هست که اگر کسی کمی از جاوا اسکریپت بدونه به سادگی اگر به View ها Component ها نگاه کنه میتونه بفهمه چه خبره!
بعد از اینکه NuxtJs به واسطه VueJs پا به عرصه گذاشت همه جا پر شد از اینکه Nuxt نسخه تکامل یافته ای از خود Vue بحاسب میاد و مسائلی مثل Server Side Rendering خیلی بولد شد و سر زبون ها پیچید.
الان حدودا از سال 2019 که نسخه 2.9.2 منتشر شده دارم باهاش کار میکنم. اوایل چنگی به دلم نزد ولی از نسخه 2.10.0 نظرم کامل برگشت و شروع کردم به خوندن مستنداتش.
اینو به عنوان یه دوست بهتون میگم، هر تکنولوژی سمت وب منتشر میشه همیشه Documentation اش رو خوب مطالعه کنین.
از شروع این پست 13 روز میگذره که نسخه 2.15.4 منتشر شده و تغییراتی داشته ولی من از 2.15.3 استفاده میکنم.
خب تا اینجا خیلی حرف زدم راجب نسخه ها و... برسیم سر تجربه که واسه اونایی میگم که هنوز سمتش نیومدن و حالا یا از ترس تست چیزای جدیده یا نمیدونم!!! چون دلیلی نداره کسی که Vue کار میکنه Nuxt رو ندید بگیره!
اول اینکه باید بگم هر چی از ویو میدونین بذارین کنار چون قرار هست خود ویو ساده تر باشه. خیلی خیلی ساده تر!
خب برای شروع یه فولدر ایجاد میکنین به هر اسمی که دوس دارین. بعد اگر با npm کار میکنین این دستور: npm init nuxt-app بعد یه نقطه بعد از nuxt-app بزنین تا در همون فولدر با همون اسم پروژه شروع شه که نیاز نباشه فولدر جدا ایجاد کنین. و اگه yarn کار میکنین این دستور: yarn create nuxt-app اینجا هم همین طور یک نقطه بندارین که راحت تر باشین و بعد از نصب اگه نگاه کنین فولدرهای جدید میبینین که توی Vue نیست.
ساختار راهنما یا DIRECTORY STRUCTURE:
.Nuxt, Content, Layouts, Middleware, Pages, Static, Nuxt.config
فولدر nuxt. این فولدر همینطور که قبلش نقطه هست بصورت Hidden هست و اتوماتیک ساخته میشه جلوتر بهتون توضیح میدم.
فولدر content این بخش اضافه است یعنی در صورتی به فایلها اضافه میشه که ماژول مخصوصش نصب باشه یعنی nuxt/content@ وقتی این ماژول رو نصب کنین انگار محتوای داینامیک Markdown یا Json دارین و محتوا رو Fetch مکنین!
فولدر layouts فایل هایی که اینجا تولید میکنین جزو صفحات اصلی بحساب میان مثل App.vue در Vue ولی بصورت سازمان یافته و کامل تر اینجا میتونین صفحات پیش فرض رو بسازید مثل صفحه error یا blog یا هرچی که قراره ساختار کلی ثابت داشته باشه.
فولدر middleware یه زمان هایی هست شما نیاز هست توابع سفارشی داشته باشین که بخواین قبل از برگه های اصلی و ثابت رندر بشه، مثل توابع auth که باید دقت داشته باشین به عنوان اولین argument حتما context رو باید اختصاص بدین.
فولدر pages همین طور که اسمش پیداس صفحه ای هست که برای ساخت router ها هست و هر برگه ای که اینجا بسازین بدون اینکه نیاز باشه به router معرفی بشه خودش اتوماتیک ساخته میشه! این یکی از قشنگیای ناکست هست همین طور که اولشم عرض کردم ناکست اومده که ویو رو از این هم ساده تر کنه.
فولدر static خب اینم از اسمش مشخصه فایل های ثابت مثل css, fonts, favicon, logo رو میتونین اینجا تشکیل بدین. تازه میتونین توی static قرار ندین فونت و استایل هاتون رو! توی پوشه assets قرار میدین و در nuxt.config با alias تنظیم میکنین.
و اما اصلی ترین ساختار یعنی nuxt.config این فایل شبیه به فایل main.js در Vue عمل میکنه ولی ساده تر. هر تنظیمی درباره پروژه تون هست توی این بخش اتفاق میوفته اعم از معرفی متا تگ ها گرفته تا معرفی plugin و css ها و alias ها و تنظیمات build و pwa و... همه در این فایل جا میگیرن.
خب یکم از جذابیت های ناکست هم بگم. یکی از جذابیت های خیلی باحالش برای یک توسعه دهنده آزادی عمل بسیار بالاس، قرار نیست اذیت بشین هر باری که بخواین صفحه بسازین هی برید توی router.js بخواین به پروژه معرفیش کنین. کافیه توی فولدر pages فقط فایل هاتونو بسازین تا خودش بره بشینه توی router و میتونین هر بار برید به فولدر nuxt. و router رو ببینید.?
یکی دیگه از جذابیت هاش اینه که اگه components: true رو توی nuxt.config هر جایی بعد از شروع این فایل یعنی export default قرار بدین تا بعد از اینکه کامپوننتی میسازین دیگه نیاز نباشه بخواین از import برای وصل کردن به برگه هاتون استفاده کنین. نه نیاز به import دارید نه export ? فقط پیشنهاد میکنم کامپوننت ها رو متمایز و خاص ایجاد کنین این مهمه که چه اسمی بهش میدین. سعی کنین یونیک انتخاب کنین و از این اسم دو بار استفاده نکنین.
یکی دیگه از جذابیت ها زمانی هست که از pwa استفاده میکنین. توی Vue باید میومدین کلی لوگو به سایزهای مختلف درست میکردین. توی ناکست یک لوگوی با کیفیت درست کنین بذاریدش توی فولدر static و تمام... حالا توی nuxt.config تنظیمات pwa رو انجام میدین و اون لوگو خودش اتوماتیک به سایزهای مختلفی که میخواین تقسیم میشه. ? برای اطلاعات بیشتر راجب nuxt/pwa@
از جذابیت های i18n هم بگم که خیلی خیلی راحت میتونین فارسی رو بهش اضافه کنین و تنظیماتش رو انجام بدین تا برگه ها خود به خود برای زبان های مختلف تنظیم بشن. برای نصب ماژول nuxt/i18n@ مراجعه کنین.
راجب SSR هم یه توضیح مختصر بدم که خیالتون راحت شه. اول اینکه برای استفاده از این مبحث مهم که برای سئو بسیار بسیار مهمه. سروری که قراره استفاده کنین حتما باید از Node.js پشتیبانی کنه. تنظیمات مربوط به سرور باید در middleware تحت عنوان server-middleware انجام بدین. اگه میخواین این بخش رو مطالعه کنین: server-side-rendering
یه چندتا ماژول ناکست هم معرفی میکنم.
ماژول pwa / ماژول auth / ماژول axios / ماژول sitemap / ماژول google-analytics / ماژول color mode / ماژول image / ماژول cloudinary / ماژول shopify / ماژول sentry
خب این بود توضیحات جامع و تجربه من از Nuxt.js که امیدوارم استفاده کرده باشین. در آخر آرزوی سلامتی و موفقیت دارم برای همه شمایی که این پست رو میخونین. خیلی دوست داشتم این پست رو یک روز بذارم با اینکه 4 سالی میشه باهاش اشنا هستم و حرفه ای کار میکنم.
موفق باشید.
