دوره ی آموزش ویوجی اس ( Vuejs 3) پروژه محور به همراه Nuxt js

دسترسی سریع به مطالب :‌

• معرفی اجمالی دوره 
• سایت SPA یا Single Page Application چیست
• کلیات دوره ی آموزش پروژه محور دفترچه تلفن با Vue.js و Laravel
• سرفصل جلسات 
• سرفصل جلسات بخش پروژه محور 
• دمو و اسکرین شات ها 
• نظرات

ویو جی اس چیست ؟ و چرا باید یاد بگیریم 

ویو جی اس ( Vue js ) در ابتدا یک کتابخانه برای زبان برنامه نویسی جاوا اسکریپت بود که در سال ۲۰۱۴ توسط ایوان یو منتشر شد و هدف آن ساختن user interface ( رابط کاربری ) وب سایت ها بصورت منعطف تر و منظم تر بود. ایوان یو یکی از کارمندان شرکت گوگل بوده است. با اضافه شدن امکانات بیشتر کم کم تبدیل به یک فریمورک شد و در نسخه ی ۲ به محبوبیت زیادی بین برنامه نویس وب رسید. توسعه ی وب سایت های مدرن توسط فریمورک ها و کتابخانه های جدید جاوا اسکریپت مثل Vue.js ، React.js و Angular.js ممکن میشود و در بین این فریمورک ها Vue.js دارای ویژگی های منحصر بفرد خودش میباشد که توانسته به محبوبیت زیادی برسد.

کتابخانه ی ویو جی اس بر اساس استاندارد های HTML ، CSS و JavaScript به توسعه دهندگان اجازه میدهد که صفحات مختلف وب را براساس کامپوننت های جدا مدیریت کنند تا بتوانند وب اپلیکیشن های تعاملی و پرسرعت بسازند. بطوریکه Vue js بهترین گزینه برای ساخت وب سایت های SPA یا تک صفحه ای است.

اگر یک توسعه دهنده ی فرانت-اند (Front-end) یا فول استک (Full-stack web developer) هستید حتما باید کتابخانه ی Vue را در نظر داشته باشید زیرا اگر قصد داشته باشید از شیوه ی سنتی طراحی وب بیرون بیایید و توانایی ساختن وب سایت های مدرن را بدست آورید باید ویو جی اس را یاد بگیرید. همچنین Vue با ایجاد کامپوننت های composable به شما اجازه میدهد که قسمت های نوشته شده را بتوانید بارها و بارها استفاده کنید که همین باعث کاهش کدهای شما و در نتیجه بالا رفتن سرعت توسعه و همچنین سرعت بارگزاری سایت ها میشود. وب سایتی که مدرن باشد و درگیر ریفرش های مختلف یا کندی سرعت نباشد قطعا موفقیت های بیشتری هم به ارمغان خواهد آورد.

در ویدیو زیر به معرفی اجمالی ویو جی اس پرداخته ایم : 

دلایلی که باید Vue js را انتخاب کنیم : 

1. برای یادگیری بسیار آسانتر است.
2. جامعه و پشتیبانی خوبی دارد.
3. ابزارها و کتابخانه های فراوانی دارد.
4. حجم کمتری نسبت به React و Angular دارد.
5. پرفرمنس و سرعت بهتری دارد.

معرفی این دوره ی آموزشی

بخش ۱- صفر تا صد آموزش vue js 

این دوره ی آموزشی دارای بخش های متعهددی میباشد که در بخش اول صفر تا صد خود Vue js می باشد و در بخش های بعدی آموزش کتابخانه ها و فریمورک های جانبی ویو جی اس و در نهایت بخش پروژه محور میباشد.

بخش ۲- آموزش کتابخانه های جانبی 

در بخش دوم کتابخانه ها و ابزارهای جانبی برای vuejs آموزش داده میشود.

بخش ۳- پروژه محور

دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین بصورت SPA یا سایت تک صفحه ای توسط فریمورک Laravel  و فریمورک Vue.js و فریمورک Bulma میباشد.

 در این پروژه تمرکز اصلی و هدف اصلی ما یادگیری کامل Vue.js میباشد . شما با طی کردن این دوره ی آموزشی علاوه بر اینکه خود مبحث ویو جی اس را بصورت کامل یاد میگیرید بلکه نحوه ی استفاده ی Vue در فریمورک  Laravel را نیز یاد خواهید گرفت .

از آنجایی که Vue.js یک فریمورک برای JavaScript خالی است برای دیزاین و طراحی نهایی سایت نیز باید یک فریمورک دیگر استفاده کنید البته چه بهتر که فریمورک شما عاری از هرگونه کد JavaScript باشد ( برعکس بوت استرپ که به جاوااسکریپت محتاج است ) چونکه کارهای مربوط به جاوا اسکریپت را Vue.js برای شما انجام خواهد داد پس برای فرانت اند وب سایت دیگر نیازی به چیز اضافه دیگر مربوط به جاوااسکریپت نیست . 

پس ما انتخابمان فریمورک Bulma است یک فریمورک کاملا ریسپانسیو برای طراحی انواع وب سایت ها به زیبایی هر چه تمام تر ...

Bulma کاملا سازگار با رزولیشین های مختلف از جمله موبایل است . همچنین بولما سبک و سریع تر است و همچنین شما دستتان برای شخصی سازی آن توسط sass آزاد است . 

همچنین Bulma بر پایه ی طراحی جدید Flex است . 

سایت تک صفحه ای یا SPA چیست ؟‌

سایت های spa که مخفف single page application است ،‌همانطور که از اسمش هم پیداست با هدف این بوجود آمده است که سایت ها را درون یک صفحه ی واحد همانند عملکرد یک اپلیکیشن به اجرا بگذارد . ویدیو زیر در رابطه با ماهیت سایت های SPA تولید شده است :

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

در واقع جرقه ی اصلی این شیوه از طراحی وب سایت با بوجود آمدن AJAX  خورد که توسعه دهندگان با AJAX دوست داشتند تمام وب سایت خود را پیاده سازی کنند تا کاربری که به سایت آنها مراجعه میکند هیچ ریفرشی نداشته باشه دریافت و ارسال اطلاعات به سمت سرور فقط درون یک درخواست مبتنی بر HTTP کوچک به سمت سرور و برعکس ارسال میشد . 

این درخواست کوچک هرگز از مرورگر درخواست نمیکرد که برای دیدن یک بخش جدید ،‌برای ثبت یک نظردر سایت ، برای جستجوی محصول خاص ،‌برای خرید کردن و ... سایت به صفحات مختلفی برود و هر بار آن صفحات لود شوند . 

بلکه بصورت خیلی ساده هدف این بود که سایت ها مثل یک اپلیکیشن نصب شده باشند که به این هدف هم کاملا رسیده شد . 

فریمورک ها و کتابخانه های JavaScript دست از تلاش خود برنداشتن و Vuejs و Reactjs و Angularjs فریمورک ها و کتابخانه هایی بودن که به توسعه دهنده ساخت سایت های بدون نیاز به ریفرش را به ارمغان آورندند . 

پس سایت SPA یا Single Page Application سایتی است که تک صفحه ای هست و نیاز نیست برای کارهای مختلف ریفرش در مرورگر اتفاق بیوفتد مثل یک برنامه ی نصب شده درون یک مرورگر است . مثلا برنامه ی چت نسخه ی وب تلگرام :) که با انگولار نوشته شده.

ویو روتر ( vue router ) چیست ؟ 

در بخش آموزش کتابخانه های vue js به بحث vue router نیز پرداخته شده است.

ویو روتر یا Vue Router ابزار رسمی Vue js برای مدیریت روت ها ( مسیر ها ) سایت میباشد. این کتابخانه درون Vue js بصورت پیشفرض قرار گرفته است.

روت ها یا مسیر ها همان URL هایی میباشد که برای دسترسی به صفحات مختلف از آن استفاده میکنیم با این تفاوت در که سایت های تک صفحه ای یا SPA مورد استفاده قرار میگیرد تا بدون رفرش شدن صفحه هم تغییرات درون صفحه اعمال شود و هم آدرس در مرورگر تغییر پیدا کند.امکانات و ویژگی هایی که vue router در اختیار شما میگذارد به شرح زیر میباشد : 

• ایجاد روت های تو در تو 
• سیستم routing داینامیک
• ماژولار ، تنظیمات برپایه ی کامپوننت
• روت برای پارامتر ها ، query ها و wildcard ها 
• ایجاد transition برمبنای سیستم transition اصلی vue js
• سیستم Fine-grained navigation control
•  استفاده از history mode یا hash mode برای html5
• شخصی سازی عملکرد اسکرول سایت
• اینکودینگ برای url ها و ...

درباره ی کلیات دوره ی آموزش پروژه محور دفترچه تلفن با Vuejs و Laravel 

در بحش پروژه محور این دوره ی آموزشی ، دفترچه مخاطبین آنلاین ساخته میشود که بتوانیم عملیات CRUD دیتابیس یا همان عملیات CREATE READ UPDATE DELETE را بدون ریفرش کردن صفحه ی مرورگر و بصورت AJAX با استفاده از Vue.js انجام دهیم . 

در ویدیو زیر در رابطه با دوره ی پروژه محور Vuejs صحبت میشود :‌

در این دوره ی آموزشی از فریمورک Laravel پی اچ پی برای ایجاد پروژه و ارتباط آن با Vue.js استفاده میکنیم .

از فریمورک Bulma که یک فریمورک جدید برای css هست بهره میبریم که باعث بالا رفتن سرعت سایت و همچنین ریسپانسیو بودن آن میشود که در دستگاه های موبایل به خوبی یک اپلیکیشن موبایلی نصب شده اجرا میشود . 

نحوه ی کار با axios برای ارسال داده ها بصورت AJAX را آموزش میدهیم و در نهایت میتوان گفت شما الفبای فریمورک قوی Vue.js را در این دوره طی خواهید کرد و مطمئنا مباحث مطرح شده در این دوره هم برای فریمورک Vue.js و هم برای Laravel و هم برای Bulma  بی نظیر است . 

سرفصل های دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین آنلاین با Vuejs و Laravel 

جلسه 1 : 

• معرفی فریمورک Vue.js و مقایسه آن با انواع فریمورک های JavaScript
• آموزش دانلود و نصب Node.js و npm
• آموزش دانلود و نصب Vue.js

جلسه 2 : 

• آموزش افزودن صحیح فایل Vue.js به سند HTML
• آموزش شروع کدنویسی با Vue.js
• آموزش کار با آبجکت اصلی Vue 
• آموزش کار با el و انتخاب element مورد نظر 
• آموزش کار با متد data  و تعریف متغیرهای Vue.js 

جلسه  3 : 

• آموزش مدیریت آبجکت ها در Vue.js
• آموزش نحوه ی استفاده از console مرورگر کروم جهت مشاهده ی رخ دادها در طول کدنویسی Vue.js و مدیریت خطاهای کدنویسی رخ داده
• آموزش تغییر لحظه ای داده ها با console
• آموزش کار با delimiters در Vue.js
• آموزش استفاده از v-bind: جهت تغییر ویژگی های تگ های HTML با استفاده از Vue.js

جلسه 4 : 

• آموزش کار با فرم های HTML و V-bind
• آموش کار با v-model 
• آموزش کار با v-model-lazy
• آموزش کار با checkbox و v-model برای دریافت آیتم های انتخاب شده در فرم HTML
• آموزش متد  join در Vue.js
• آموزش کار با v-for یا ساخت حلقه در Vue.js

جلسه 5 : 

• آموزش کار با آرایه ها در Vue.js
• ساخت یک لیست از آیتم های قابل انتخاب در Vue.js
• آموزش تعریف key برای آیتم های حلقه ی v-for 
• آموزش شرط if و else و elseif 

جلسه 6 : 

• آموزش کار با رویداد کلیک یا v-on:click 
• آموزش کار با توابع در Vue.js و نوشتن تابع جدید در بخش methods
• آموزش استفاده از @click بجای v-on:click در رویداد کلیک 
• آموزش کار با @click.prevent 

جلسه 7 : 

• آموزش استایل نویسی با Vue.js
• آموزش اختصاص کلاس css توسط Vue.js
• آموزش کار با متد @mousehover در Vue.js
• اختصاص مقادیر استایل با استفاده از v-model

جلسه 8 :

• آموزش Bind کردن انواع کلاس های css با استفاده از Vuejs به همراه مثال 
• تغییر کلاس های css و استایل element های HTML با استفاده از Vue.js

جلسه 9 : 

• آموزش ساخت لیست در Vuejs 
• آموزش ساخت لیستی از مرورگرها و ورژن های متناظر آنها بصورت تمرین عملی

جلسه 10 : 

• آموزش انتساب رشته ها  در Vuejs
• آموزش انجام عملیات ریاضی روی داده های عددی
• آموزش ایجاد پروژه مبدل داده های ریاضی(سانتی متر) بصورت عملی 

جلسه 11 : 

• آموزش کار با متد indexOf
• ساخت یک پروژه سوال و جواب اتوماتیک برای نشان دادن کارآیی indexOf
• آموزش افزودن Jquery و استفاده از متد Ajax
• آموزش فراخوانی api جیسان یک وب سرویس
• آموزش لود کردن محصولات از یک وب سرویس به همراه توضیحات و تصویر و ...

جلسه 12 : 

• آموزش چرخه ی حیات در Vuejs 
• آموزش کار با متد beforeCreate
• آموزش کار با متد Created 
• آموزش کار با متد beforeMounted
• آموزش کار با متد Mounted
• آموزش کار با متد beforeUpdate
• آموزش کار با متد Updated
• آموزش کار با متد beforeDestroy
• آموزش کار با متد destroyed
• آموزش ایجاد و کار با component های Vue.js
• آموزش ایجاد template های مختلف با استفاده از Component ها 

جلسه  13 : 

• ادامه ی آموزش کار با component ها و ایجاد component های جدید 
• دریافت json از وب سرویس و نمایش محصولات با استفاده از component ها 
• آموزش استفاده از component برای افزودن element های جدید 

جلسه 14 : 

• آموزش نصب و کار با vue.js devtools برای مرورگر کروم 
• آموزش ایجاد toggle برای نمایش بخشی از متن محصول 
• آموزش کار با devtools جهت پیدا کردن component های vue.js و مدیریت آنها به آسانی

جلسه 15 :

• آموزش پیشرفته ی کار با component ها در Vue.js و ایجاد template های بیشتر
• آموزش کار با scope
• آموزش افزودن تگ های HTML سفارشی به لیست component ها فراخوانی شده با json

جلسه 16 : 

• آموزش تعریف متد remove برای پاک کردن یک آیتم از یک لیست در Vue.js 
• آموزش کار با متد splice در Vue.js 

سرفصل دوره ی پروژه محور Vue.js + Laravel + Bulma

جلسه 17 : 

• آموزش نصب Composer 
• آموزش نصب فریمورک  Laravel 
• آموزش نصب Nodejs و npm
• آموزش دانلود و نصب فریمورک Bulma
• آموزش نصب Vue.js و Vue-router 

جلسه 18 : 

• ایجاد view جدید در Laravel 
• ایجاد route جدید در Laravel 
• آموزش ایجاد یک view به همراه Vuejs در Laravel 
• تست و راه اندازی Vuejs و استفاده از Laravel Mix 

جلسه 19 : 

• آموزش نصب محیط توسعه ی Atom و افزونه های مورد نیاز برای Laravel و Vue.js 
• آموزش استفاده از دستور npm run watch برای کامپایل css و js های پروژه در یک فایل
• آموزش ایجاد و استفاده از component مربوط به header و footer سایت توسط Vue.js
• آموزش استفاده از vue-router در پروژه دفترچه مخاطبین 
• آموزش ساخت فایل component های مختلف و لود کردن آنها بدون ریفرش شدن مرورگر

جلسه 20 : 

• آموزش نصب Font Awesome در Laravel با استفاده از npm 
• ایجاد item برای نمایش مخاطبین در لیست 
• ایجاد دکمه های مدیریتی مثل ویرایش - حذف - نمایش یک آیتم در دفترچه مخاطبین 
• آموزش استفاده از پنجره ی modal در bulma و استفاده ی آن توسط Vue.js
• آموزش کدنویسی رویداد کلیک @click برای نمایش و بستن یک پنجره ی modal

جلسه 21 : 

• آموزش ایجاد دامنه ی مجازی در xampp بصورت phonebook.me 
• آموزش ساخت Model جدید در لاراول
• آموزش ساخت migration جدید در لاراول
• آموزش ساخت Controller جدید در لاراول از نوع resource
• آموزش مدیریت جدول دیتابیس با استفاده از Migration 
• آموزش استفاده از php artisan جهت migrate کردن تغییرات جدول دیتابیس
•  

جلسه 22 : 

• آموزش اعتبار سنجی فرم با Laravel Request اختصاصی و Vuejs 
• آموزش نصب axios و استفاده از آن برای درج اطلاعات در پایگاه داده با استفاده از Model لاراول و Vuejs بصورت ایجکسی ( درج مخاطب جدید )

جلسه 23 : 

• آموزش ایجاد متد جدید getData در کنترلر برای لود کردن داده های مخاطبین از دیتابیس
• آموزش لود کردن داده ها توسط axios 
• آموزش پر کردن لیست از مخاطبین موجود در دیتابیس توسط Vue.js

جلسه 24 : 

• آموزش ایجاد modal جدید و نمایش آن زمان کلیک شدن نمایش یک مخاطب 
• آموزش فراخوانی یک مخاطب با آیدی بدون رفرش صفحه توسط axios
• آموزش نمایش اطلاعات یک مخاطب لود شده در modal ایجاد شده 

جلسه 25 : 

• آموزش ایجاد modal یا پنجره جدید با استفاده از Vue.js برای عملیات بروزرسانی یک مخاطب خاص از دفترچه مخاطبین
• آموزش فراخوانی اطلاعات مخاطب از دیتابیس و نمایش ان در فرم modal ،  جهت ویرایش
• آموزش ثبت تغییرات انجام شده در دیتابیس با Axios و متدهای model

جلسه 26 : 

• آموزش ایجاد متد delete یک مخاطب خاص از دیتایس با استفاده از axios 
• آموزش برنامه نویسی متد delete و پاک کردن آیتم انتخاب شده توسط Vue.js و متد destroy کنترلر ، بدون رفرش مرورگر

جلسه 27 : 

• رفع برخی باگ های پروژه 
• آموزش تبدیل تمام قسمت های پروژه به یک وب سایت Single Page Application 

جلسه 28 : 

• آموزش مرتب کردن خودکار لیست توسط Vue.js بصورت حروف الفبایی بعد از درج یک فیلد جدید بدون نیاز به رفرش مرورگر
• آموزش خالی کردن فیلد های فرم به محض افزودن یک آیتم برای لیست مخاطبین با استفاده از دستورات Vue.js 

جلسه 29 : 

• آموزش ایجاد متد جستجو بین آیتم های لیست مخاطبین با وارد کردن عبارت در input جستجو
• ایجاد watcher برای جستجو بین فیلدهای Name 

جلسه 30 : 

• آموزش کدنویسی جستجوی پیشرفته برای سرچ بین فیلد های دیگر مثل email , phone و ...
• آموزش پر کردن لیست از نتایج جستجو شده و بازگشت اطلاعات قبلی بعد از پاکسازی فیلد جستجو
• جستجو بصورت آنی با تایپ هر حرف یا حذف آن ، در فیلد input جستجو 

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

دمو دوره ی آموزش پروژه محور ساخت دفترچه تلفن بصورت SPA با Vuejs و لاراول 

• ویدیو جلسه ی دوم :‌

تصویر متحرک زیر نتیجه ی نهایی یک قسمت از این دوره هست که یک پروژه با بک اند لاراول و فرانت اند ویو جی اس (Vue js) میباشد:

دوره دارای پشتیبانی آنلاین میباشد و شما میتوانید سوالات مربوط به Vue js را از پشتیبانی ما سوال کنید تا در وقت اداری به شما پاسخ داده شود.