چگونه یک پروژه Nuxt.js را شروع کنیم؟ - قسمت اول

یکی از دغدغه‌های برنامه‌نویس‌های فرانت اند اینه که چجوری یک اپلیکیشن یا سایت جدید رو شروع کنن. آیا از ابزارهای آماده استفاده کنیم و یا همه چیز رو از اول اختراع کنیم؟ بسته به شرایط یکی از حالت ها انتخاب میشه.

هدف این مقاله آموزش نحوه استارت یک پروژه با Nuxt.js هست که بتونیم توی حداقل زمان ممکن بستر یک اپلیکیشن Vue.js رو داشته باشیم و فقط به توسعه فکر کنیم و کمترین درگیری ممکن رو برای کانفیگ کردن داشته باشیم.

راه های مختلفی برای شروع یک پروژه Nuxt.js وجود دارد، ولی ما میخوایم مدلی که بیشتر باهاش راحتیم رو شرح بدیم.

پس از اطمینان نصب Node.js و یک Package Manager (چه npm و چه Yarn) با ترمینال مورد علاقمون وارد فولدر خالی پروژمون میشیم.

لازم به ذکره که توصیه ما استفاده از Yarn به جای npm هست به خاطر سرعت بیشتر در نصب Dependencyها و ارائه امنیت بیشتر.

اولین گام استفاده از دستور زیر برای شروع پروژه هست :

npm init

در حین این پروسه از شما سوالاتی پرسیده میشه در رابطه با نام پروژه و ورژن پروژه و غیره که پس از پر کردن موارد، یک فایل package.json برای شما ساخته می‌شود. (اگر می‌خواهید سوالات از شما پرسیده نشود و با اطلاعات پایه ای پر شود می‌توانید از دستور زیر استفاده کنید :

npm init -y

خروجی این دستور به شکل زیر خواهد بود :

پس از اینکه فایل package.json ساخته شد، آماده برای نصب تنها پکیج مورد نیاز برای شروع هستید و اون هم پکیج Nuxt.js هست که با دستور زیر انجام می‌شود :

npm install nuxt

یا

yarn add nuxt

مرحله بعدی اضافه کردن دستورات زیر به بخش scripts فایل package.json می‌باشد.

"dev": "nuxt"

فایل package.json شما باید بدین صورت باشد :

چهت انجام یک تست ساده کافیه یک فولدر به نام pages در فولدر پروژتون بسازید و داخل آن یک فایل به نام index.vue بسازید. (مسیر فایل بدین شکل خواهد بود :‌  /pages/index.vue)

سپس محتویات فایل رو به شکل زیر تغییر دهید :

داخل ترمینالتون یکی از دستورات زیر رو بزنید :

npm run dev
yarn dev

با صفحه ای مشابه صفحه زیر مواجه خواهید شد :‌

به آدرسی که بهتون میده یه سر بزنید.

آدرس داخل عکس اینه : http://localhost:3000

صفحه ای که با آن مواجه خواهید شد به شکل زیر خواهد بود :

در قسمت بعدی ساختارهای بیشتری معرفی خواهند شد.