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

در این مقاله از سری مقاله‌های آموزش nuxt.js قصد داریم به بررسی چگونگی نمایش صفحات وب سایت بپردازیم. در nuxt.js روش‌های مختلفی برای ارائه اطلاعات و المان‌های سایت وجود دارد. به‌طورکلی این روش‌ها با توجه به فایل app.vue و سایر فایل‌هایی که در پوشه‌های pages ، layouts و components در ساختار نرم‌افزار یا وب‌سایت شما قرار دارند، عمل می‌کنند. فایل app.vue به عنوان فایل اصلی که مسئول نمایش اطلاعات صفحه اصلی سایت است، در نظر گرفته می‌شود. اما تنها این فایل نیست که می‌تواند صفحه اصلی را نمایش دهد، بلکه با تغییراتی که در سایر پوشه‌ها و فایل‌ها می‌دهید، بسته به نیاز نرم‌افزار خود، می‌توانید از روش‌های دیگری هم برای سازماندهی نمایش صفحات وب سایت کمک بگیرید. اگر تاکنون فریم‌ورک nuxt.js را بر روی سیستم خود نصب نکرده‌اید، پیشنهاد می‌کنیم ابتدا مقاله «nuxt.js چیست؟» را مطالعه کنید، سپس با ادامه این مقاله همراه ما باشید!

در این مقاله از مجموعه مقاله‌های آموزش nuxt.js قرار است به بررسی پوشه Assets در این فریم‌ورک بپردازیم. قبلاً در مقاله «nuxt.js چیست؟» به چگونگی نصب ناکست جی اس اشاره کردیم. گفتیم که برای نصب و استفاده از آن نیاز است حتماً Node.js در سیستم شما نصب شده باشد. اگر طبق آن پیش رفته باشید، احتمالاً اکنون باید یک پروژه nuxt.js در سیستم خودتان ایجاد کرده باشید. با ایجاد یک پروژه ناکست جی اس، پوشه‌های مختلفی در مکانی که شما پروژه خود را استارت زده‌اید، توسط خود nuxt و سیستم مدیریت پکیج نود جی اس (npm) ایجاد می‌گردد. از جمله این پوشه‌ها، پوشه public است که برای ذخیره‌کردن تصاویر و فایل‌ها به‌صورت استاتیک که از طریق آدرس سایت، قابل‌نمایش باشد، به کار می‌رود. علاوه‌برآن شما می‌توانید پوشه‌ها و فایل‌های دیگری را نیز خودتان به‌صورت دستی اضافه کنید. اگر نام‌گذاری‌های شما مطابق با استانداردهای ناکست جی اس باشد، از قابلیت‌های خودکار و ویژه‌ای که این فریم‌ورک در ساختار خود برای پوشه‌ها در نظر گرفته، بهره‌مند می‌شوید. در این مقاله قصد داریم به بررسی پوشه assets در nuxt.js بپردازیم و توضیحات بیشتری در مورد کارایی آن ارائه کنیم. ازآنجایی‌که این پوشه برای نگه‌داری فایل‌ها و تصاویر و سایر مواردی که نیاز وب‌سایت است، استفاده می‌شود، ما آن را «پوشه فایل ها در ناکست جی اس» می‌نامیم.

«nuxt.js چیست؟» این سؤالی است که در ذهن بسیاری از افرادی که در زمینه برنامه‌نویسی فعالیت می‌کنند (یا قصد فعالیت دارند)، شکل می‌گیرد. این فریم‌ورک جاوااسکریپت که در واقع می‌توانیم به نگارش فارسی آن را ناکست جی اس نیز بخوانیم، ابزاری قدرتمند برای ساختن وب‌سایت و نرم‌افزارهای تحت وب است. اساس و شالوده آن بر پایۀ vue.js بنا نهاده شده است. سازندگان آن هدف خود را از ایجاد چنین فریم‌ورکی، ایجاد یک محیط توسعه وب (Web Development) کارا و کارآمد عنوان کرده‌اند که تجربیات گذشته توسعه‌دهندگان وب‌سایت و برنامه‌نویسان در این حیطه را در خود جای داده است. پس در پاسخ به پرسش «nuxt.js چیست؟» به زبان ساده می‌توانیم عرض کنیم که ناکست جی اس یک فریم‌ورک متن‌باز رایگان است که راه‌حل مناسبی برای ساختن وب‌سایت‌ها و نرم‌افزارهای تحت وب (Web Applications) بر اساس فریم‌ورک vue.js در اختیار می‌گذارد. اگر با فریم‌ورک ویو جی اس آشنا باشید، یادگیری nuxt.js چندان دشوار نخواهد بود. بلکه بسیاری از روندها و فعالیت‌هایی که نیاز است در ساختار ویو جی اس خودتان سازماندهی کنید، در nuxt.js بصورت پیش‌فرض و براساس نام پوشه‌ها و فایل‌ها از قبل تنظیم شده‌اند.

لذا از این نظر کار شما برای ساختن وب‌سایت، راحت‌تر خواهد بود. به چنین تغییراتی که در nuxt ایجاد شده و به عبارتی فرآیند کار را خودکار و اتوماتیک می‌کند، در اصطلاح Automation گفته می‌شود. در ادامه مقاله سعی می‌کنیم توضیحات مختصری در مورد این فرآیند Automation و قراردادهایی که در این فریم‌ورک لحاظ شده، ارائه کنیم. سپس به صورت اجمالی به پردازش سمت سرور (server-side rendering) که در حالت پیش‌فرض در این ابزار فعال است، می‌پردازیم. درنهایت نیز در مورد نحوه نصب nuxt توضیح می‌دهیم تا بتوانید گام نخست را در استفاده از nuxt.js بردارید.