چگونه به راحتی پروژه Vue.js خود را در Netlify به صورت رایگان اجرا کنیم

Summarize this content to 400 words in Persian Lang
Vue.js یکی از محبوب ترین فریم ورک های جاوا اسکریپت برای ساخت رابط های کاربری مدرن و واکنشی است. بعد از توسعه پروژه Vue.js، مرحله بعدی میزبانی آنلاین آن است تا در دسترس کاربران باشد. در میان بسیاری از پلتفرم های میزبانی موجود، Netlify به دلیل سادگی، سرعت و توانایی اجرای پروژه ها به صورت رایگان متمایز است.

در این وبلاگ، شما را از طریق مراحل استقرار یک برنامه Vue.js در Netlify راهنمایی می کنیم.

چرا Netlify را برای میزبانی انتخاب کنیم؟

Netlify یک پلتفرم توسعه‌دهنده پسند است که ارائه می‌دهد:

استقرار مداوم: هر زمان که تغییرات را در مخزن Git خود فشار دهید، به طور خودکار برنامه خود را مجدداً مستقر کنید.

طرح رایگان: ردیف رایگان سخاوتمندانه با پهنای باند، دقیقه ساخت و استفاده از عملکرد بدون سرور.

دامنه های سفارشی: به راحتی دامنه های سفارشی را با پشتیبانی HTTPS پیکربندی کنید.

CDN جهانی: تحویل سریع و ایمن محتوا.

حالا بیایید شروع کنیم!

مرحله 1: پروژه Vue.js خود را راه اندازی کنید

اگر قبلاً پروژه Vue.js ندارید، می‌توانید به سرعت با استفاده از Vue CLI آن را ایجاد کنید:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پروژه خود را به صورت محلی بسازید تا مطمئن شوید همه چیز همانطور که انتظار می رود کار می کند:

npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این یک را ایجاد می کند dist پوشه حاوی فایل های آماده تولید شما.

مرحله 2: کد خود را به GitHub (یا GitLab/Bitbucket) فشار دهید

Netlify برای استقرار به مخزن شما متصل می شود. برای انجام این کار:

Git را در پروژه خود راه اندازی کنید:

git init
git add .
git commit -m “Initial commit”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد را به یک مخزن فشار دهید:

git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: پروژه خود را در Netlify مستقر کنید

1. وارد Netlify شوید

یک حساب کاربری رایگان در Netlify ایجاد کنید و وارد شوید.

2. یک سایت جدید ایجاد کنید

را کلیک کنید “افزودن سایت جدید” > “وارد کردن یک پروژه موجود”.
ارائه دهنده Git خود را انتخاب کنید (به عنوان مثال، GitHub، GitLab، Bitbucket).
مخزن حاوی پروژه Vue.js خود را انتخاب کنید.

3. تنظیمات استقرار را پیکربندی کنید

شعبه: شاخه ای را که می خواهید مستقر کنید انتخاب کنید (معمولا main یا master).

دستور ساخت: وارد شوید npm run build.

دایرکتوری انتشار: این را روی dist، که حاوی فایل های تولیدی شما است.

پیکربندی مثال:

Build Command: npm run build
Publish Directory: dist

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. سایت خود را مستقر کنید

را کلیک کنید “استقرار سایت”.
منتظر بمانید تا Netlify پروژه شما را بسازد و اجرا کند. پس از تکمیل، یک URL زنده خواهید دید (به عنوان مثال، https://your-site-name.netlify.app).

مرحله 4: پیکربندی دامنه سفارشی (اختیاری)

اگر دامنه سفارشی دارید، می توانید به راحتی آن را در Netlify پیکربندی کنید:

برو به تنظیمات دامنه از سایت شما
دامنه سفارشی خود را اضافه کنید.
تنظیمات DNS دامنه خود را برای اشاره به Netlify (دستورالعمل های ارائه شده در داشبورد) به روز کنید.
Netlify به طور خودکار HTTPS را برای دامنه شما فراهم می کند.

مرحله 5: بهینه سازی برای عملکرد

Netlify عملکرد عالی را در خارج از جعبه تضمین می کند، اما در اینجا نکات اضافی وجود دارد:

Lazy Loading را در Vue.js فعال کنید: اجزاء را فقط در صورت نیاز بارگیری کنید.

از توابع لبه Netlify استفاده کنید: برای منطق سمت سرور نزدیک به کاربر.

بهینه سازی دارایی ها: فشرده سازی تصاویر و به حداقل رساندن CSS/JS.

چرا یک قالب مدیریت از پیش ساخته شده انتخاب کنید؟

ساختن داشبورد مدیریت از ابتدا می تواند زمان بر باشد. استفاده از یک قالب مدیریت از پیش ساخته شده به شما امکان می دهد به جای اختراع مجدد چرخ، روی ویژگی های اصلی برنامه خود تمرکز کنید.

PrimeDash: یک الگوی مدیریت آماده برای استفاده

اگر روی پروژه ای کار می کنید که به داشبورد مدیریت نیاز دارد، بررسی کنید الگوی مدیریت PrimeDash Vue.js. این یک الگوی مدرن و کاملاً پاسخگو است که بر روی Vue.js و Vuetify.js ساخته شده است و آن را به نقطه شروع عالی برای پروژه های شما تبدیل می کند. همراه با:

اجزای UI از پیش طراحی شده
ساختار کد مدولار
تم های قابل تنظیم
مستندات جامع

ادغام PrimeDash در پروژه Vue.js می تواند هفته ها در زمان توسعه شما صرفه جویی کند.

نتیجه گیری

استقرار یک برنامه Vue.js در Netlify یک فرآیند سریع و بدون دردسر است. با دنبال کردن مراحل ذکر شده در این راهنما، می توانید پروژه خود را در عرض چند دقیقه به صورت زنده و با استقرار مداوم و پشتیبانی از دامنه سفارشی اختیاری کامل کنید.

و اگر پروژه شما شامل ساخت داشبورد یا پنل‌های مدیریتی است، برای شروع از PrimeDash استفاده کنید. آن را در ICreator Studio بررسی کنید.

کد نویسی مبارک! 🚀

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

npm run build

   git init
   git add .
   git commit -m "Initial commit"

   git remote add origin https://github.com/your-username/your-repo-name.git
   git push -u origin main

   Build Command: npm run build
   Publish Directory: dist