لرن بلاگ

آموزش nuxt.js

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

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

این فریم ورک به مرور به‌روزرسانی‌هایی دریافت می‌کند. اکنون که ما در حال نوشتن این متن هستیم، نسخه شماره 3 آن یعنی Nuxt 3 فعال است. احتمالاً اکثر این مقالات مرتبط با آموزش nuxt.js نیز با همین نسخه فریم ورک تولید می‌شوند. اگر در گذشته با این فریم ورک کار کرده‌اید، قطعاً وب سایت های شما با Nuxt 2 ساخته شده‌اند. البته اصول و قواعد کلی در نسخه‌های مختلف فریم ورک ناکست جی اس یکسان است. اما به هر حال برای به‌روز نگه داشتن سایت خود نیاز خواهید داشت که ویژگی‌های جدیدی را که nuxt در هر نسخه خود ایجاد می‌کند، یاد بگیرید.

نصب nuxt.js چندان دشوار نیست. قابلیت استفاده از آن هم به صورت آنلاین و هم به صورت آفلاین (ساخت وب سایت در سیستم شخصی خودتان و سپس آنلاین کردن آن) وجود دارد. امیدواریم این مقالات (که البته به مرور در سایت تکمیل می‌گردد) به شما در یادگیری ناکست جی اس کمک کند.

لیست مقالات آموزش nuxt.js:

تصویر بنر مقاله Tailwind-CSS در nuxt.js

یادگیری ناکست جی اس: افزودن Tailwind CSS در nuxt.js

در این آموزش از سری آموزش‌های 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 چیست؟

nuxt.js چیست؟ نصب nuxt و شروع کار با آن

«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 بردارید.

ادامه مطلب »

راهنمای حرکت از ویو جی‌اس به سمت ناکست جی‌اس

هنگامی که صحبت از ساخت برنامه‌های کاربردی وب می‌شود، ویو جی‌اس (Vue.js) شهرت خود را به عنوان یک فریم‌ورک بسیار انعطاف‌پذیر و موردقبول توسعه‌دهندگان وب به دست آورده است. اما نظرتان چیست اگر بتوانید ویژگی‌های آن را حتی بیشتر تقویت کنید، به خصوص برای حل چالش های مربوط به موضوع بهینه‌سازی موتور جستجو (SEO)؟ اجازه دهید به سراغ ناکست 3 (Nuxt.js 3) - فریم‌ورک قوی ساخته‌شده بر پایه ویو جی‌اس 3 - برویم که تجربه توسعه وب‌سایت و نرم افزارهای تحت وب را برای شما را با رفع برخی محدودیت‌های ذاتی برنامه‌های تک صفحه‌ای (SPAs) لذت‌بخش‌تر می‌کند. در این پست، من به این موضوع می پردازم که چه دلیلی دارد که بخواهید از ویو جی‌اس به سمت ناکست جی‌اس بروید و چگونه ناکست 3 قابلیت‌های ویو 3 را تقویت می‌کند.

این محتوا تنها برای کاربران دارای پلن طلایی قابل نمایش است.
وارد شوید تعیین سطح عضویت
ادامه مطلب »