مقدمه بر vue js قسمت اول

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

۱- html , css

۲- js, jquery

نصب خط فرمان vue

در صورتی که npm بر روی سیستم شما نصب باشد با اجرای دستور زیر در خط فرمان می توانید vue- cli را نصب کنید. با استفاده از این ابزار می توان برای ایجاد پروژه و دستورات خودکار دیگر استفاده کرد:

npm i -g @vue/cli @vue/cli-service-global

ایجاد یک پروژه

برای ایجاد یک پروژه در خط فرمان دستور زیر را وارد کنید:

vue create vue-app

ورود به پوشه و اجرای پروژه

به صورت پیش فرض vue یک پروژه helloworld را ایجاد می کند با دستورات زیر ابتدا به پوشه پروژه وارد می شویم و دستور اجرا صادر می کنیم. پس از اجرا پروژه در مرورگر آدرس localhost:8080 وارد کنید پروژه helloworld را مشاهده می کنید:

cd vue-app ورود به پوشه

npm run serve اجرای پروژه

ساختار پروژه vue

در هر پروژه پوشه هایی به وجود می آید که هر کدام اهداف خاصی دارند مهم ترین آنها پوشه های زیر است:

۱- پوشهpublic این پوشه برای نگه داری فایل های css و تصاویر و سایر فایل های سمت مشتری است.

۲- پوشه src این پوشه مهترین و پرکارترین قسمت در آموزش ماست. درون این پوشه کامپوننت ها و فایل App قرار دارد.

۳- فایل App.vue این فایل اولین کامپوننت برنامه است.

۴-فایل main.js این فایل نقطه شروع پروژه است و معمولا نیاز به تغییر ندارد.

۵- پوشه components درون این پوشه کامپوننت های طراحی شده کاربر قرار می گیرد.

در ادامه

در قسمت بعدی نحوه طراحی هدر صفحه تصویر یک را آموزش می دهیم.