مقدمه Vue.js

vue framework logo
vue framework logo

رفقا سلام من فاطمه چهارلنگی هستم و تازه وارد دنیای جذاب برنامه نویسی شدم و توی زمینه Front-endمشغول یادگیری ام.

مدت کوتاهی میشه شروع به یادگیری یکی از فریم ورک های جاوا اسکریپت به نام Vue کردم و دارم سعی میکنم درکش کنم و بیشتر بشناسمش ،با خودم فکر کردم با توجه به کمبود منابع آموزشی فارسی در این زمینه خوب میشه اگر باهم یاد بگیریم، من مطالبی رو که تو سایت های مختلف و از جمله سایت رسمی vuejs.org مطالعه کردم رو باهاتون به اشتراک میذارم:)

"قطعا مطالبی که منتشر میکنم خالی از ایراد نیست میتونید ایراد هارو برام ایمیل کنید یا زیر همین پست کامنت کنید که من هم از شما یاد بگیرم"

حالا میریم سراغ یادگیری ساخت یک پروژه با Vuejs...


چگونه یک پروژه Vue با Vue Cliبسازیم؟؟؟

خب اول از همه باید vue Cli رو نصب کنیم برا ی این کار ابتدا تریمنال رو باز کنید و بعد دستور npm install -g @vue/cli رو وارد کنید کنید تا vue cli نصب بشه...

npm install -g @vue/cli
npm install -g @vue/cli

حالا بعد از این مرحله میریم سراغ درست کردن پروژه با vue برای این کار باید یک پروژه با نام دلخواه درست کنیم که با کد دستوری vue create name ایجاد میشه،اینجا به جای name هر اسمی رو که دلتون بخواد میتونید انتخاب کنید ...

 vue create name
vue create name

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

گزینه اول default و گزینه دوم هم manually هست،توی گزینه اول یه سری ابزار ها اضافه شده اما توی گزینه دوم که manually میتونیم گزینه های بیشتری اضافه کنیم مثلا sass و..

خیلی خب من به جز گزینه های قبلی گزینه css و Router رو هم اضافه میکنم...

و یکی یکی مراحل با توجه به ابزار مورد نیازتون تایید یا رد میکنید ... در آخر از شما میپرسه لازم دارید این تنظیمات رو برای آینده نگه دارید به صورت معمول جواب خیر هست برا ی جواب دادن به سوال ها از y و n استفاده میکنیم...

و در نهایت منتظر می مونیم تا پروژه برای ما نصب بشه ...

npm run serve
npm run serve


اگر npm روی پروژه نصب نشده باشه با دستور npm install میتونید روی پروژه نصبش کنید.

و بعد با وارد کردن کد npm run serve پروژه serve میشه

حالا با کپی کردن آدرس توی مرورگر پروژه vue خودمون رو میتونیم توی مرورگر ببینیم..

حالا همه چیز برای شروع یادگیری vue js آماده است شما هم میتونید این مراحلو انجام بدید اگر ایرادی یا نکته ایی هست که من نمیدونستم یا اشتباهی بود میتونید برام کامنت بذارید ممنونم که این پست رو مطالعه کردید ❤

[email protected]