ساخت یک پروژه جدید با استفاده از Vue CLI

ساخت یک پروژه جدید با Vue CLI

Vue CLI یک ابزار رسمی برای ساخت پروژه‌های Vue است که به توسعه‌دهندگان کمک می‌کند به سرعت یک پروژه استاندارد با تنظیمات پیش‌فرض یا سفارشی ایجاد کنند.

 

مراحل ایجاد پروژه جدید با Vue CLI

۱. نصب Node.js (اگر از قبل نصب نداری)

چون Vue CLI بر پایه Node.js کار می‌کنه، باید Node.js و npm رو نصب داشته باشی. اگه هنوز نصب نکردی، از سایت رسمی Node.js نسخه LTS رو دانلود و نصب کن.

برای اطمینان از نصب، توی ترمینال این دستورات رو بزن:

undefined

node -v  # نمایش نسخه Node.js
npm -v   # نمایش نسخه npm

۲. نصب Vue CLI

 

حالا Vue CLI رو به‌صورت سراسری نصب کن:

undefined

npm install -g @vue/cli

بعد از نصب، بررسی کن که درست نصب شده:

undefined

vue --version

خروجی باید نسخه‌ای از Vue CLI رو نمایش بده.

۳. ساخت پروژه جدید

برای ساخت یه پروژه جدید، دستور زیر رو اجرا کن و اسم پروژه‌ات رو جای my-vue-app بذار:

undefined

vue create my-vue-app

🔹 حالا Vue ازت می‌پرسه که چه نوع تنظیماتی رو می‌خوای:

1. Default (Vue 3 + Babel + ESLint) → انتخاب پیش‌فرض، سریع و ساده
2. Manually select features → اگه می‌خوای تنظیمات خاصی مثل TypeScript، Vue Router، Vuex و ... رو انتخاب کنی

پیشنهاد من برای شروع، گزینه Default هست. اما اگه می‌خوای پروژه رو شخصی‌سازی کنی، گزینه دوم رو بزن و ویژگی‌های موردنظرت رو انتخاب کن.

۴. اجرای پروژه

بعد از اینکه Vue پروژه رو ساخت، وارد پوشه پروژه شو:

undefined

cd my-vue-app

و سرور توسعه رو اجرا کن:

undefined

npm run serve

حالا Vue سرور رو راه‌اندازی می‌کنه و خروجی‌ای شبیه این نشون می‌ده:

undefined

App running at:
  - Local: http://localhost:8080/

مرورگرت رو باز کن و برو به http://localhost:8080 تا نتیجه رو ببینی!

جمع‌بندی

1. Vue CLI رو نصب کن:
   undefined

   npm install -g @vue/cli
2. یه پروژه جدید بساز:
   undefined

   vue create my-vue-app
3. وارد پروژه شو و سرور رو اجرا کن:
   undefined

   cd my-vue-app
   npm run serve