ناکس جی اس ( Nuxt.js ) چیست و چطور یاد بگیریم ؟
ناکس جی اس (Nuxt.js) چیست ؟
ناکس جی اس (Nuxt.js) یک فریمورک جاوااسکریپت سمت کاربر است که بر پایه فریمورک ویو جی اس (Vue.js) ساخته شده است. این فریمورک برای توسعه وب سایت و برنامههای تحت وب تک صفحه ای (SPA) استفاده میشود.
ناکس جی اس امکاناتی را برای توسعه کنندگان فراهم میکند که به سادگی باعث توسعه و مدیریت برنامههای تحت وب پیچیده میشود. این فریمورک قابلیت هایی مانند سازماندهی صفحات، رندر سمت سرور، ایجاد پیشداروها (Prefetching)، بارگیری پویا (Dynamic Loading) و روتینگ دینامیک (Dynamic Routing) را فراهم میکند.
هدف ناکس جی اس ساخت برنامه های وب نئوترکیبی (Universal) است که در سمت سرور رندر شده و به عنوان یک برنامه واقعی و حاکی از سمت کاربر به کاربر ارسال میشود.
با وجود Vue.js چرا ناکس جی اس ( Nuxt.js ) خلق شده است ؟
ناکس جی اس به عنوان یک زبان برنامه نویسی وب توسط Ryan Dahl در سال ۲۰۰۹ به وجود آمده است. دلیل اصلی ایجاد ناکس جی اس بودن سرعت عمل و کارایی در برخورد با وظایف همروند و ورودی و خروجی به طور آسون برای برنامه نویسان بود.
از طرفی، ویو جی اس یک کتابخانه جاوا اسکریپت مورد استفاده برای ساخت واسط کاربری (UI) در برنامه های وب است. این کتابخانه به طور خاص برای ساخت اپلیکیشن های SPA (Single-Page Application) به کار می رود و برای مدیریت و به روز رسانی پویاییت در پنجره مرورگر استفاده می شود. به عبارت دیگر، ناکس جی اس و ویو جی اس ابزارهای متفاوتی هستند که هر کدام ویژگی ها و نیازهای متفاوت خود را دارند و براساس اهداف و نیازهای برنامه نویسان در زمینه های مختلف مورد استفاده قرار می گیرند.
با ناکس جی اس ( Nuxt.js ) چه چیزی و چطور میتوانم بسازم
با استفاده از ناکس جی اس (Nuxt.js) میتوانید وب سایت هایی متناسب با نیازهای خود خلق کنید. ناکس جی اس یک فریمورک وب سایت بر پایه ویو جی اس (Vue.js) است که قابلیت ایجاد سایتهای یک برگ، چند برگ و حتی اپلیکیشنهای وب پیشرفته را دارا میباشد. در زیر فرایند ایجاد یک وب سایت با ناکس جی اس را شرح میدهیم:
- نصب و راهاندازی: ابتدا نیاز است ناکس جی اس را روی سیستم خود نصب کنید. برای این کار میتوانید از مدیر بسته npm استفاده کنید و دستورات زیر را اجرا کنید:
npm install -g create-nuxt-app
create-nuxt-app project-name
cd project-name
npm run dev
این دستورات ناکس جی اس را در سیستم شما نصب کرده و یک پروژه جدید با نام "project-name" ایجاد میکند. سپس وارد مسیر پروژه شده و سرور توسعه را اجرا کنید.
2. طرح بندی صفحات: میتوانید صفحات مختلف وب سایت خود را در پوشه "pages" پروژه قرار دهید. مثلاً میتوانید یک فایل index.vue برای صفحه اصلی، contact.vue برای صفحه تماس، about.vue برای صفحه درباره و... ایجاد کنید. همچنین میتوانید پوشه های زیر پوشه "pages" را برای صفحات با ساختار پیچیده تر استفاده کنید.
3. روتینگ: ناکس جی اس قابلیت مدیریت مسیرها و روتینگ را داراست. برای افزودن روتینگ، میتوانید فایل "nuxt.config.js" را ویرایش کرده و در قسمت modules ماژول "vue-router" را فعال کنید. سپس فایل "router.js" را در پوشه "src" ایجاد کنید و مسیرهای مختلف را در آن تعریف کنید. برای مثال، میتوانید یک روت به صفحه اصلی با از سرور ایجاد کردن صفحات استفاده کنید، میتوانید استفاده کنید Nuxt generate تاصفحه ها خارج شوید
javascript
{
path: '/',
component: '~/pages/index.vue'
},
{
path: '/contact',
component: '~/pages/contact.vue'
},
{
path: '/about',
component: '~/pages/about.vue'
}
4. قالب بندی: میتوانید از قالب بندیهای موجود یا قالب بندیهای سفارشی برای طراحی صفحات استفاده کنید. ناکس جی اس قابلیت استفاده از قالب بندیهای CSS و CSS-in-JS را داراست. میتوانید از CSS قالبهایی مانند Tailwind CSS، Bootstrap یا Foundation استفاده کنید یا از CSS-in-JS مانند Styled Components یا Emotion استفاده کنید.
5. نصب و استفاده از پلاگین ها: ناکس جی اس قابلیت استفاده از پلاگین ها را داراست. میتوانید از پلاگین های موجود برای افزودن ویژگی ها مانند بارگیری تنبل افزار، SEO، نمودارها، تجزیه و تحلیل و غیره استفاده کنید. همچنین میتوانید پلاگین های سفارشی خود را ایجاد کنید.
با استفاده از این مراحل، میتوانید وب سایت های مختلف با ناکس جی اس خلق کنید و قابلیت های پیشرفته وب را به آنها اضافه کنید.
برچسب: ناکس جی اس،