Nuxt.js چیست؟
Nuxt.js یک چارچوب قدرتمند ، سطح بالا ، منبع باز و رایگان می باشد که برای توسعه برنامه های در مقیاس بین المللی و شرکتی مورد استفاده قرار می گیرد.
از ویژگی های Nuxt می توان به این نکته اشاره کرد که جزئیات سمت سرور و کلاینت را خلاصه می کند.
ویژگی های Nuxt.js
رندر در سمت سرور
سطح یادگیری نسبتا آسان
مدیریت بهتر با پوشه بندی مناسب
مدیریت متا تگ ها ی موجود
بهبود سئوی سایت
و...
هدف کلی Nuxt چیست ؟
هدف کلی Nuxt این است که به اندازه کافی انعطاف پذیر باشد تا بتوانیم از آن به عنوان پایه و اساس پروژه اصلی خود استفاده کنیم.
دلایل استفاده کردن از Nuxt.js
برنامه های در مقیاس جهانی را بدون مشکل ایجاد کنیم
یک برنامه جهانی برای توصیف کدهای جاوااسکریپت استفاده می شود که می تواند هم در سمت کلاینت و هم در سمت سرور اجرا شود و از جمله نقاط قوت Nuxt.js ساده تر کردن ایجاد برنامه های جهانی است.
این ویژگی در حالی مورد استقبال قرار گرفته است که بسیاری از چارچوب های جاوا اسکریپت ، مانند Vue ، با هدف ایجاد اپلیکیشن های تک صفحهای (SPA) طراحی شدهاند.
همچنین Nuxt.js به ما اجازه دسترسی به ویژگی هایی مانند isServer و isClient را در کامپوننت های خود می دهد تا به وسیله ی آنها به توانیم کنترل بهتری بر روی سمت سرور یا سمت کاربر داشته باشیم.
رندر شدن صفحات از قبل
Nuxt.js این امکان را به ما می دهد تا نسخه ایستا از وب سایت خود را با پیکربندی Webpack تولید کنیم ، برای هر مسیر (صفحه) که به صورت ایستا تولید می شود ، مسیر فایل جاوا اسکریپت خود را نیز دریافت می کند ، این کار باعث افزایش سرعت می شود زیرا اندازه فایل جاوا اسکریپت را نسبت به اندازه کل برنامه کمتر می کند.
دریافت ساختار پروژه به طور پیش فرض
در بسیاری از برنامه های کوچک Vue ، شما در نهایت ساختار کد را به بهترین شکل ممکن در چندین فایل مدیریت می کنید ، ساختار برنامه پیش فرض Nuxt.js یک نقطه شروع عالی برای سازماندهی برنامه هایمان به روشی قابل درک ارایه می دهد.
آشنایی با چند دایرکتوری از nuxt.js
کامپوننت :
پوشه ای که بتوانید اجزای Vue فردی خود را سازماندهی کنید.
layouts :
پوشه ای که حاوی طرح بندی های برنامه اصلی شما است.
pages :
پوشهای که حاوی مسیرهای برنامه شما است. Nuxt.js تمام فایل های vue را در داخل این فهرست می خواند و روتر برنامه را ایجاد می کند.
store :
پوشهای که حاوی تمام فایلهای فروشگاه Vuex برنامه شما است.
انتقال بین مسیرهای خود را به راحتی تنظیم کنید
Vue دارای یک عنصر بستهبندی است که کار با انیمیشن های جاوا اسکریپت ، انیمیشنهای CSS و انتقال های CSS را روی عناصر یا اجزای شما ساده میکند.
در صورتی که Nuxt.js مسیرهای شما را به گونهای تنظیم میکند که هر صفحه در یک عنصر قرار می گیرد تا به سادگی بتوانیم بین صفحات جابه جا شویم.
به راحتی Single File Components بنویسید
در بسیاری از پروژههای کوچک Vue، مؤلفهها با استفاده از Vue.component برای هدف قرار دادن یک عنصر در بدنه هر صفحه تعریف میشوند.
این برای پروژه های به خوبی کار می کند اما در پروژه های بزرگتر ممکن است مدیریت آن دشوار شود.
تمامی این مشکلات توسط کامپوننت های تک فایلی با پسوند vue حل می شوند برای استفاده از آنها ، باید یک فرآیند ساخت با ابزارهایی مانند Webpack و Babel راه اندازی کنید.
Nuxt.js از پیش پیکربندی شده با Webpack برای شما ارائه می شود ، بنابراین می توانید بدون نیاز به تنظیم فرآیند ساخت پیچیده ، شروع به استفاده از فایل های vue کنید.
کامپایل ES6/ES7 را بدون هیچ کار اضافی دریافت کنید
در ساختار Nuxt.js علاوه بر Webpack ، Babel استفاده شده است ، Babel کامپایل آخرین نسخه های جاوا اسکریپت مانند ES6 و ES7 را در جاوااسکریپت انجام می دهد که می تواند در مرورگرهای قدیمی تر اجرا شود همچنین Babel در Nuxt.js برای ما تنظیماتی انجام می دهد تا همه فایل های vue و همه کدهای ES6 که در داخل تگ های
راه اندازی با سرور
در حالی که شما در حال توسعه و کار بر روی فایل های vue هستید ، Nuxt.js از یک پیکربندی Webpack برای بررسی تغییرات استفاده میکند و همه چیز را برای شما کامپایل میکند.
می توانید دستور npm run dev را در داخل یک پروژه Nuxt.js اجرا کنید و سرور توسعه را راه اندازی کنید .
وجود اطلاعات و پشتیبانی
یک مجموعه GitHub به نام Nuxt Community وجود دارد که کتابخانهها، ماژولها و... را جمعآوری میکند تا ایجاد برنامه شما را آسانتر کند.
همچنین برای یادگیری کامل nuxt می توانید در دوره آموزش پروژه محور nuxtjs شرکت کنید و به صورت حرفه ای شروع به یادگیری این فریمورک محبوب کنید.
توسعه دهنده وب
تقريبا ٩ سال از اولين سايتي كه طراحي كردم ميگذره ، این اشتیاق از آن زمان ادامه پیدا کرد که در نهایت من به عنوان یک توسعه دهنده وب مشغول به كار شدم. طي اين سال ها تجربه اي كه از شركت در پروژه ها و چالش هاي ياگيري برنامه نویسی بدست آوردم ، تصميم گرفتم كه اين تجربه رو با بقيه اشتراك بزارم كه نتیجه ی آن شد تاپ دمی.
- آموزش ساخت صفحه ی وب سایت با استفاده از HTML و css
- ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش اول
- آموزش نصب ، راه اندازی و کامپایل sass
- میانبر های مفید ادیتور VSCode
- سوالات مصاحبه ای از php و لاراول
این مقاله چقدر مفید بود ؟