ساخت یک پروژه جدید با استفاده از Vue CLI
ساخت یک پروژه جدید با استفاده از Vue CLI
ساخت یک پروژه جدید با Vue CLI
Vue CLI یک ابزار رسمی برای ساخت پروژه‌های Vue است که به توسعه‌دهندگان کمک می‌کند به سرعت یک پروژه استاندارد با تنظیمات پیش‌فرض یا سفارشی ایجاد کنند.
مراحل ایجاد پروژه جدید با Vue CLI
۱. نصب Node.js (اگر از قبل نصب نداری)
چون Vue CLI بر پایه Node.js کار می‌کنه، باید Node.js و npm رو نصب داشته باشی. اگه هنوز نصب نکردی، از سایت رسمی Node.js نسخه LTS رو دانلود و نصب کن.
برای اطمینان از نصب، توی ترمینال این دستورات رو بزن:
node -v # نمایش نسخه Node.js
npm -v # نمایش نسخه npm
npm -v # نمایش نسخه npm
۲. نصب Vue CLI
پیشنهاد ویژه یادگیری
دسترسی نامحدود به بیش از ۴,۰۰۰ ویدئوی آموزشی تخصصی
با تهیه یک اشتراک ماهانه در پلتفرم Elimi|علیمی، بدون محدودیت به تمام دوره‌ها، پروژه‌ها و مسیرهای یادگیری دسترسی پیدا کنید.
حالا Vue CLI رو به‌صورت سراسری نصب کن:
npm install -g @vue/cli
بعد از نصب، بررسی کن که درست نصب شده:
vue --version
خروجی باید نسخه‌ای از Vue CLI رو نمایش بده.
۳. ساخت پروژه جدید
برای ساخت یه پروژه جدید، دستور زیر رو اجرا کن و اسم پروژه‌ات رو جای my-vue-app بذار:
vue create my-vue-app
🔹 حالا Vue ازت می‌پرسه که چه نوع تنظیماتی رو می‌خوای:
- Default (Vue 3 + Babel + ESLint) → انتخاب پیش‌فرض، سریع و ساده
- Manually select features → اگه می‌خوای تنظیمات خاصی مثل TypeScript، Vue Router، Vuex و ... رو انتخاب کنی
پیشنهاد من برای شروع، گزینه Default هست. اما اگه می‌خوای پروژه رو شخصی‌سازی کنی، گزینه دوم رو بزن و ویژگی‌های موردنظرت رو انتخاب کن.
۴. اجرای پروژه
بعد از اینکه Vue پروژه رو ساخت، وارد پوشه پروژه شو:
cd my-vue-app
و سرور توسعه رو اجرا کن:
npm run serve
حالا Vue سرور رو راه‌اندازی می‌کنه و خروجی‌ای شبیه این نشون می‌ده:
App running at:
- Local: http://localhost:8080/
- Local: http://localhost:8080/
مرورگرت رو باز کن و برو به http://localhost:8080 تا نتیجه رو ببینی!
جمع‌بندی
- Vue CLI رو نصب کن:
npm install -g @vue/cli
- یه پروژه جدید بساز:
vue create my-vue-app
- وارد پروژه شو و سرور رو اجرا کن:
cd my-vue-app
npm run serve
ساخت یک پروژه جدید با استفاده از Vue CLI
ساخت یک پروژه جدید با Vue CLI
Vue CLI یک ابزار رسمی برای ساخت پروژه‌های Vue است که به توسعه‌دهندگان کمک می‌کند به سرعت یک پروژه استاندارد با تنظیمات پیش‌فرض یا سفارشی ایجاد کنند.
مراحل ایجاد پروژه جدید با Vue CLI
۱. نصب Node.js (اگر از قبل نصب نداری)
چون Vue CLI بر پایه Node.js کار می‌کنه، باید Node.js و npm رو نصب داشته باشی. اگه هنوز نصب نکردی، از سایت رسمی Node.js نسخه LTS رو دانلود و نصب کن.
برای اطمینان از نصب، توی ترمینال این دستورات رو بزن:
node -v # نمایش نسخه Node.js
npm -v # نمایش نسخه npm
npm -v # نمایش نسخه npm
۲. نصب Vue CLI
حالا Vue CLI رو به‌صورت سراسری نصب کن:
npm install -g @vue/cli
بعد از نصب، بررسی کن که درست نصب شده:
vue --version
خروجی باید نسخه‌ای از Vue CLI رو نمایش بده.
۳. ساخت پروژه جدید
برای ساخت یه پروژه جدید، دستور زیر رو اجرا کن و اسم پروژه‌ات رو جای my-vue-app بذار:
vue create my-vue-app
🔹 حالا Vue ازت می‌پرسه که چه نوع تنظیماتی رو می‌خوای:
- Default (Vue 3 + Babel + ESLint) → انتخاب پیش‌فرض، سریع و ساده
- Manually select features → اگه می‌خوای تنظیمات خاصی مثل TypeScript، Vue Router، Vuex و ... رو انتخاب کنی
پیشنهاد من برای شروع، گزینه Default هست. اما اگه می‌خوای پروژه رو شخصی‌سازی کنی، گزینه دوم رو بزن و ویژگی‌های موردنظرت رو انتخاب کن.
۴. اجرای پروژه
بعد از اینکه Vue پروژه رو ساخت، وارد پوشه پروژه شو:
cd my-vue-app
و سرور توسعه رو اجرا کن:
npm run serve
حالا Vue سرور رو راه‌اندازی می‌کنه و خروجی‌ای شبیه این نشون می‌ده:
App running at:
- Local: http://localhost:8080/
- Local: http://localhost:8080/
مرورگرت رو باز کن و برو به http://localhost:8080 تا نتیجه رو ببینی!
جمع‌بندی
- Vue CLI رو نصب کن:
npm install -g @vue/cli
- یه پروژه جدید بساز:
vue create my-vue-app
- وارد پروژه شو و سرور رو اجرا کن:
cd my-vue-app
npm run serve
پیشنهاد ویژه یادگیری
دسترسی نامحدود به بیش از ۴,۰۰۰ ویدئوی آموزشی تخصصی
با تهیه یک اشتراک ماهانه در پلتفرم Elimi|علیمی، بدون محدودیت به تمام دوره‌ها، پروژه‌ها و مسیرهای یادگیری دسترسی پیدا کنید.