عالیییی استاد دمت گرم ، واقعا اولین دوره vue ایه که تاحالا دیدم این قدر ساده توضیح داده بشه و در آخر هم ممنون بایت اینکه Nuxt رو هم به دوره اضافه کردین 🙏🙏
آموزش جامع ویو جی اس (3 Vue.js) و Nuxt Js - پروژه محور
امروزه در دنیای برنامه نویسی، ویو جی اس (۳ Vue.js) و Nuxt Js طرفداران زیادی پیدا کرده اند. در این دوره مفاهیم پایه فریم ورک Nuxt Js و ۳ Vue.js به شکل جامع و گام به گام آموزش داده میشود؛ بنابراین تمام برنامه نویسان جاوا اسکریپتی میتوانند در این دوره شرکت کنند. با ما باشید تا ویژگیهای این دوره آموزشی را بررسی کنیم...
فریمورک ویو جی اس (۳ Vue.js) و Nuxt Js چیست؟
پیش از معرفی دوره آموزش جامع ویو جی اس (۳ Vue.js) و Nuxt Js ابتدا باید با چیستی این فریم ورک هوشمند آشنا شوید. فریم ورک ویو جی اس (۳ Vue.js) و Nuxt Js مبتنی بر زبان برنامه نویسی جاوا اسکریپت است. تاریخچه پیدایش این فریم ورک به سال 2013 میلادی مربوط میشود. این فریم ورک هوشمند با هدف توسعه روابط کاربری در شبکههای اجتماعی طراحی شده است. ۳ Vue.js و Nuxt Js برای ساخت وبسایتهای بزرگ اینترنتی و اپلیکیشنهای هوشمند تحت وب تک صفحهای کاربرد دارد.
علاوه بر این موضوع، با استفاده از Vue. Js میتوان کامپوننتهایی را به وجود آورد که در بخشهای مختلف یک پروژه استفاده میشود.
انتخاب یک فریمورک یا کتابخانه مناسب همیشه یکی از دغدغه های اساسی برنامه نویسان جاوا اسکریپت بوده و هست. اما بدون شک از یادگیری فریمورک ۳ Vue.js و Nuxt Js پشیمان نخواهید شد و فرصت های کاری و درآمد بالایی را برای شما به ارمغان خواهد آورد.
انواع فریم ورک های جاوا اسکریپت
فریم ورک ها در انواع react، vue و angular دسته بندی می شوند. همهی اینها کار ما را راه میاندازند. فرقی ندارد که کدام را انتخاب کنید. هر کدام از اینها را که انتخاب کنیم، به روش خودشان، چیزی که ما میخواهیم را پیاده سازی میکنند. پس برای انتخاب یک فریم ورک جاوا اسکریپتی، تنها چیزی که لازم است برای شروع بدانید این است که آیا واقعا میخواهید یاد بگیرید یا نه؟
معایب فریم ورک react و angular چیست؟
بزرگترین مشکل برنامه نویسان زمان کار با این دو فریم ورک این است که خیلی زود به زود، ورژنهای آنها تغییر میکند. در نتیجه آن ها مجبور می شوند پروژهها را به آخرین ورژن upgrade کنند. آن ها اغلب به دنبال یک فریم ورک می گردند تا بتوانند این مشکل را تا حدودی برطرف کنند. پیشنهاد برنامه نویسانی که چند قدم از آن ها جلوتر هستند، Vue.js است. این فریم ورک از محبوبیت خاصی بین توسعهدهندگان برخوردار است. همچنین جزو تاپترین فریم ورکهای Front-End است؛ ولی متاسفانه آموزش ویدیویی چندان خوبی برای Vue.js وجود ندارد. از این رو اغلب برنامه نویسان مجبور می شوند از document برای آموزش vue.js استفاده کنند. در حالی که مطالعه document برای آموزش فریم ورک یا یک زبان برنامهنویسی، خیلی خوب نیست و به سختی می توان چیزی از آن یاد گرفت.
لازم به ذکر است که آموزش هر سه فریمورک به بهترین شکل ممکن در آکادمی کدیاد در دسترس شما می باشد.
معرفی دوره آموزش جامع ویو جی اس (۳ Vue.js) و Nuxt Js
برای یادگیری یک فریم ورک مانند Vue.js یا یک زبان به صورت پیشرفته، تنها چیزی که لازم است پروژه زدن است. از این رو شما با شرکت در این دوره، میتوانید از هر دورهای بی نیاز شوید. زیرا این دوره کاملا پروژه محور است. اگر در این دوره پا به پای جلسات پروژهها را انجام دهید؛ قطعا میتوانید در کمترین زمان ممکن به یک فرانت کار حرفهای تبدیل شوید.
تنها چیزی که بعد از گذراندن این دوره نیاز دارید این است که پروژه بزنید و تجربهی پروژهی واقعی را کسب کنید. هر چند پروژه آخر این دوره واقعی است؛ اما شما باز هم نیاز دارید تجربه کسب کنید تا در این حوزه حرفی برای گفتن داشته باشید.
با شرکت در این دوره آموزشی و یادگیری مفاهیم پایه فریم ورک Nuxt Js و ۳ Vue.js توانایی کار با ابزارهایی مانند Vuetify، Vuex، Composition API و Options API را به دست میآورید. آموزش نصب و راه اندازی داکر به همراه ساخت مسیرهای عمومی و خصوصی از دیگر مزایای ثبت نام در این دوره آموزشی است. مربی این دوره در تمام مراحل آموزش کنار شما خواهد بود و به هرگونه سوال مربوط به این فناوری پاسخ خواهد داد. اما بیاید بیشتر با این فریم ورک آن و محتویات دوره آشنا شویم.
کتابخانه های محبوب Vue js
همان طور که در بالاتر نیز به این موضوع اشاره کردیم Vue. Js برای توسعه رابط کاربری و برنامه نویسی اپلیکیشنهای تحت وب استفاده میشود. در نتیجه بهتر است برای آموزش Vue.js اول Css3 و Html5 را آموزش ببینید که میتوانید آن را در دیگر دوره های کدیاد به راحتی پیدا کنید. همان طور که میدانیم Vue بر مبنای زبان برنامه نویسی جاوا اسکریپ طراحی شده است. از این رو علاوه بر آن بهتر است آشنایی کامل با برنامه نویسی شی گرا نیز داشته باشید. ویو همانند دیگر فریمورکها دارای کتابخانههای مختص به خود میباشد که هر یک از آنها قابلیتهای مختلفی را ارائه داده اند که عبارتند از:
- Element UI
- IView
- Vuetify
- Mint UI
به این نکته توجه داشته باشید که vue.js یک کتابخانه بسیار ساده است که ظاهری شبیه به سایت دارد؛ اما هنگامی که در کنار یک کتابخانه دیگر قرار بگیرد میتوان از آن به عنوان یک وب سایت کامل SPA استفاده کرد.
فریم ورک Nuxt.js چیست؟
فریم ورک دیگری به نام Nuxt js وجود دارد که این فریمورک دارای سطح بسیار بالاتری نسبت به فریمورک قبلی میباشد. پایههای Nuxt js با توجه به Vue. Js طراحی شده است. Nuxt js امروزه توسعه اپلیکیشنهای تحت وب و یا اپلیکیشنهای جهانی Vue.js را راحتتر از قبل کرده است.
از برخی از اصلیترین ویژگیهایی که این فریمورک دارد میتوان به دسترسی، عملکرد ساده و سئو قوی آن اشاره کرد. این فریمورک برای توسعه یک سایت پیشرفته نیازمند به اعمال زیر میباشد.
- Vue
- Vue Router
- Vuex or Pinia (تنها زمانی وجود دارد که از Store Option استفاده کنید)
- Vue Server Renderer
- Vue-meta
ویژگیها و مزایا nuxt.js چیست؟
nuxt.js امروزه به عنوان یک چارچوب انعطافپذیر برای توسعه دهندهها معرفی شده است. توسعه دهندهها از این فریمورک میتوانند به عنوان یک پایگاه داده اصلی استفاده کنند. علاوه بر این موضوع، این فریم ورک از تمامی ویژگیهای Vue.js استفاده کرده است. به زبان سادهتر توسعه دهندهها میتوانند به راحتی با این فریمورک برنامههای Vue.js را توسعه دهند. nuxt.js باید دارای برخی از اصلیترین ویژگیها باشد که در ادامه آنها را برای شما شرح دادهایم.
- امکان رندر کردن در سمت سرور
- مدیریت متدها با فایل بندیهای مناسب
- مدیریت متا تگها
- از دیگر ویژگیهای این فریمورک میتوان به عملکرد بهتر سئو، یادگیری آسان و کاربرپسند بودن آن اشاره کرد.
کاربردهای فریمورک ویو جی اس (۳ Vue.js) و Nuxt Js
رایجترین کاربردهای فریمورک ویو جی اس (۳ Vue.js) و Nuxt Js را میتوان در موارد زیر خلاصه کرد:
- Nuxt Js و ۳ Vue.js به یک سرور قوی متصل است و از آن برای به روزرسانی خودکار اپلیکیشنهای هوشمند استفاده میشود.
- سئوی قوی و ارتقای وبسایت اینترنتی یک کاربرد رایج برای این فریم ورک است.
- ساخت صفحات استاتیک با استفاده از این فناوری بسیار ساده خواهد بود؛ زیرا محتوای صفحه ابتدا در HTML جای گذاری میشود.
- تقسیم کردن کدهای یک صفحه به شکل خودکار از دیگر کاربردهای این فریم ورک است که به ایجاد یک نسخه پایدار از صفحه وب کمک میکند.
مخاطبین دوره آموزش جامع ویو جی اس (۳ Vue.js) و Nuxt Js
مخاطبین این دوره قطعا نمی توانند افراد مبتدی باشند! در واقع، برنامه نویسان جاوا اسکریپتی که به دنبال یک فریمورک خوب برای ادامه مسیر خود برای تبدیل شدن به یک فرانت کار حرفه ای می باشند، اصلی ترین مخاطبین این دوره می باشند. پس اگر می توانید به خوبی با جاوا اسکریپت کار کنید، در این سکوی پرتاب منتظر شما هستیم.
پیش نیازهای دوره آموزش جامع ویو جی اس (۳ Vue.js) و Nuxt Js کدیاد
برای آن که بتوانید این آموزش را به خوبی پشت سر بگذارید، بهتر است در ابتدا با مباحث پایه بیشتر آشنایی داشته باشید. به عنوان مثال بهتر است با یادگیری HTML/CSS/JS شروع کنید. شما میتوانید تمامی این موارد را با دوره های آموزش برنامه نویسی آکادمی کدیاد پشت سر بگذارید. اگر با این موارد آشنایی دارید، برای شروع دوره آموزش جامع Vue.js و Nuxt.js 3 به صورت پروژه محور، آماده باشید.
آینده فریمورک ویو جی اس (۳ Vue.js) و Nuxt Js
اما آینده این فریمورک چگونه است؟ آیا با تسلط کافی به مفاهیم این فریم ورک، میتوان به درآمد مطلوبی دست پیدا کرد؟ توسعه شبکههای اینترنتی و صفحات گوگل باعث افرایش نیاز به این فریمورک هوشمند میشود. با توجه به پیشرفت و محبوبیت روزافزون این فریمورک و توسعه قابلیتهای موجود در این زمینه، میتوان آینده فریم ورک ویو جی اس و Nuxt Js را بسیار درخشان پیش بینی کرد.
سخن پایانی
دوره آموزش جامع ویو جی اس (۳ Vue.js) و Nuxt Js طرفداران بسیار زیادی دارد؛ زیرا نیاز به این فریم ورک در دنیای امروزی در حال افزایش است. ضمن شرکت در این دوره آموزشی، میتوانید رزومه خود را برای ورود به بازار کار برنامه نویسی و انجام پروژههای فریلنسری تکمیل کنید. این فریم ورک آینده شغلی بسیار خوبی دارد و ضمن تسلط کافی به مفاهیم آن، میتوانید درآمد خوبی داشته باشید.
سرفصل های دوره
پیشنیاز های شروع کار
استفاده از Vue از طریق CDN و آشنایی اولیه
ارسال اطلاعات از Vue به فایل html
Method ها در Vue - برسی Event ها
Conditional Rendering (v-if , v-else , v-else-if, v-show)
آشنایی با v-for
کار با v-text و v-html
کار با v-bind | پروژه Progress Bar
آشنایی با two way binding | ساخت فرم تماس با ما
آشنایی با v-once
پروژه دفترچه تلفن | بخش اول
پروژه دفترچه تلفن | بخش دوم
پروژه دفترچه تلفن | بخش پایانی - برسی Computed ها
ساخت پروژه با Vue Cli و برسی ساختار پروژه
برسی ساختار Component ها
ارسال اطلاعات به کامپوننت فرزند | برسی Props
آشنایی با emit
برسی و کار با Ref
برسی کامل Slot ها
Teleport
برسی قابلیت Watch
چرخه حیات کامپوننت ها
ساخت پروژه و Component های مورد نیاز
نمایش لیست کارها
افزودن Todo
انجام عملیات حذف و تکمیل Todo
Drag and Drop Todo
تکمیل پروژه Todo
افزودن پکیج Vue Toast Notification به پروژه
ساخت پروژه و ایجاد قالب
تکمیل قالب پروژه و ساخت مدل ها
اعتبار سنجی Form | روش اول
اعتبار سنجی Form | استفاده از Vee Validate
استفاده از Yup در کنار Vee Validate
Validation-Schema
تکمیل پروژه و مباحث مربوط به Vee-Validate
برسی کامل Compostion Api و مقایسه با Option APi
تغییر ساختار پروژه Todo-App به Composition Api
نصب و معرفی کلیات Vue Router
ارسال و دریافت پارامتر و Query String به روت ها
انتقال قالب به پروژه
کار با Route Name | نحوه استفاده از قالب آماده و رفع خطا های js قالب (topkala-template)
Lazy loading | تکمیل صفحه جستجو محصول
Nested Routes
ساخت صفحه 404 | Route Active Class
نصب و معرفی Vuex
Getters و State
Actions
Modules
پروژه سبد خرید | بخش اول
پروژه سبد خرید | بخش دوم
پروژه سبد خرید | بخش سوم
معرفی Vuetify و استفاده از آن در پروژه
آشنایی با http و نصب axios
تکمیل صفحه لیست کاربران
افزودن کاربر جدید
ساخت Loading برای درخواست های Http
ویرایش کاربر جدید
صفحه لیست دسته بندی ها
افزودن و ویرایش دسته بندی
حذف دسته بندی | استفاده از SweetAlert
صفحه مدیریت پست ها
افرودن پست
ویرایش پست
اضافه کردن Pagination
ساخت صفحه اصلی سایت
ساخت صفحه Post - (همراه با کامنت)
ساخت صفحه جستجو
صفحه 404 | روش مشکلات پروژه
برسی کامپوننت Transaction
پابلیش پروژه روی هاست (کنترل پنل Plesk)
آشنایی با TypeScript
ساخت اولین پروژه با NUXT
برسی ساختار Nuxt و شروع پروژه Todo-App
پروژه Todo-App بخش دوم | معرفی و کار با Composable
ساخت پروژه و انتقال قالب
ساخت Component های پایه | button
ساخت Component های پایه | base-modal
ساخت Component های پایه | Show-More
ساخت Component های پایه | Input
نحوه دریافت اطلاعات از سرور در Nuxt 3
ساخت متد واسط برای Fech$ | شخصی سازی Fech$
ساخت صفحات Login و Register | بخش اول
ساخت صفحات Login و Register | بخش دوم
ساخت صفحات Login و Register | بخش سوم
نحوه عملکرد Pinia و پیاده سازی در Nuxt
پیاده سازی Auth-Store | بخش اول
پیاده سازی Auth-Store - بخش دوم | Plugin In Nuxt 3
قرار دادن پروژه روی Github
صفحه اصلی فروشگاه | اسلایدر اصلی
صفحه اصلی فروشگاه | اسلایدر اصلی - بخش دوم
اعمال Reverse Proxy با استفاده از Vite
صفحه اصلی فروشگاه | Banners
صفحه اصلی فروشگاه | محصولات شگفت انگیز
صفحه اصلی فروشگاه | محصولات شگفت انگیز - بخش دوم
صفحه اصلی فروشگاه | دسته بندی های محصول
صفحه اصلی فروشگاه | Responsive سازی
نحوه بروزرسانی Nuxt
صفحه Search | بخش اول
صفحه Search | ساخت مدل ها و سرویس
صفحه Search | ساخت useSearch composable
صفحه Search | داینامیک کردن صفحه
صفحه Search | ساخت صفحه بندی و Breadcrumb
صفحه Search | فیلتر دسته بندی
صفحه Search | فیلتر فقط محصولات موجود و فقط کالاهای تخفیف دار
صفحه Search | فیلتر قیمت
صفحه محصول | بخش اول
صفحه محصول | بخش دوم
صفحه محصول | بخش سوم
صفحه محصول | بخش چهارم
صفحه محصول | بخش پنجم
صفحه محصول | بخش ششم - ثبت نظر روی محصول
صفحه محصول | بخش هفتم - ثبت نظر روی محصول_بخش دوم
صفحه محصول | بخش هشتم - ثبت نظر روی محصول_بخش سوم
صفحه محصول | بخش نهم - ثبت نظر روی محصول_بخش چهارم
بروزرسانی پروژه به Nuxt 3 Stable Version
اضافه کردن LoadingIndicator و رفع مشکل لاگین
پنل کاربری | بخش اول
پنل کاربری | ویرایش حساب کاربری
پنل کاربری | ویرایش حساب کاربری - بخش دوم ( شخصی سازی پیام های خطای Yup )
پنل کاربری | آدرس های کاربر
پنل کاربری | آدرس های کاربر - بخش دوم
پنل کاربری | آدرس های کاربر - بخش سوم
پنل کاربری | آدرس های کاربر - حذف آدرس
پنل کاربری | تغییر کلمه عبور
سبد خرید - بخش اول
سبد خرید - بخش دوم
سبد خرید - بخش سوم ( تکمیل سبد خرید در سمت کاربر | Local Storage)
سبد خرید - بخش چهارم | وصل کردن اطلاعات به سرور
سبد خرید - بخش پنجم | Checkout - نهایی سازی سفارش
سبد خرید - بخش ششم | صفحه پرداخت موفق و ناموفق
پنل کاربری | سفارشات کاربر
استفاده از Swiper برای اسلایدر های سایت
داینامیک کردن دسته بندی های Menu
رفع خطا های پروژه
استفاده از Nuxt Image برای بهینه سازی تصاویر پروژه
ساخت و استفاده Skeleton Loading
نمایش سریع محصول
رفع مشکل Layout - ساخت صفحه خطا ( 404 و ... )
رفع مشکلات صفحه محصول | SpyScroll و افزودن به سبد خرید
رفع مشکل SideBar
حذف لینک ها و بخش های Static
ایجاد Meta Tag های مورد نیاز برای سئو
Account Guard | Middleware in Nuxt
خروج از حساب کاربری | Logout User
اتمام و خروجی گرفتن از پروژه | استفاده از Liara
بروزرسانی پروژه به Nuxt 3.8.2 | کَش کردن اطلاعات با UseAsyncData
برسی و دلیل استفاده از Schema | استفاده از Nuxt-Schema
این دوره برای چه کسانی مناسـب است؟
- افرادی که به تازگی Javascript را یادگرفته اند یا افرادی که قصد یادگیری Vue.js و Nuxt.js را دارند
پیشنیاز های دوره چه چیزهایی هستند؟
- JavaScript
- HTML
- CSS
نظرات دانشجویان
پارسا رضایی |
دانشجوی دوره آموزش جامع ویو جی اس (3 Vue.js) و Nuxt Js - پروژه محور
m m |
دانشجوی دوره آموزش جامع ویو جی اس (3 Vue.js) و Nuxt Js - پروژه محور
سلام، خسته نباشید. استاد اشرافی عزیز ممنون بابت این دوره، بهترین قیمت با بالاترین کیفیت و مطالب.
امیر حسین رجبی |
دانشجوی دوره آموزش جامع ویو جی اس (3 Vue.js) و Nuxt Js - پروژه محور
من به عنوان کسی که این دوره رو گذروندم میتونم بگم که این دوره vue ، از کامل ترین دوره های موجود در سطح بازاره و با این دوره راحت به تمامی مباحثی که نیاز داریم دست پیدا میکنیم، از آقای اشرافی هم تشکر میکنم برای پشتیبانی خوبی که داشتن و به تمامی سوالات پاسخ میدادن
دانیال ستایش |
دانشجوی دوره آموزش جامع ویو جی اس (3 Vue.js) و Nuxt Js - پروژه محور
سلام مهندس ممنون از شما خیلی عالی بود دوره، مطالب رو ساده و در عین حال کاربردی تدریس کردین و به نظرم یکی از بهترین دوره های vue توی مارکت ایران همین دوره است بخاطر اینکه کل دوره رو پروژه زدین 😍
مدرس دوره
محمد اشرافی
محمد اشرافی هستم مدیر پروژه کدیاد ، پنج ساله که توی حوضه وب کار میکنم تخصص اصلیم net. و vue.js هست و درکنار برنامه نویسی مشاوره و تدریس هم انجام میدم
سوالات متداول
در این دوره از 3 vuejs و Nuxt.js 3 استفاده کردهایم
در این دوره ما از صفر Vue.js 3 رو در قالب چندین پروژه عملی آموزش داده ایم تا شما کاملا با این فریمورک آشنا بشید و راحت بتوانید پروژه های خود را مدیریت کنید. در آخر هم با Nuxt 3 یک Market Place ( فروشگاه اینترنتی ) را پیاده سازی کرده ایم که کاملا آماده ورود به بازار کار شوید. بله شما بعد از این دوره آماده ورود به بازار کار هستید ولی به شرطی که دوره را با دقت نگاه کنید و تمرینات را انجام بدید. پس از یادگیری برنامه نویسی، مهارت های نرم را نیز تمرین کنید.
بله. Nuxt یکی از قدرتمند ترین فریمورک های Front است که به خوبی می توان بحث SSR و SSG را مدیریت کنید و در حال حاضر وبسایت های بزرگی از جمله Alibaba ،Jabama ،Bama ،freelance.com ،Eseminar ،mobit و هزاران وبسایت بزرگ از این فریمورک قدرتمند استفاده میکنند.
Vue یک فریمورک Client Side است که مثل بقیه فریمورک های مشابه داخل روند سئو خیلی قوی عمل نمیکنند و برای وبسایت هایی مثل فروشگاهی و وبلاگی گزینه خوبی نیست. برای اینکه به بهترین شکل سئو را پیاده سازی کنیم، باید از فریمورکی مثل Nuxt استفاده کنیم که البته Nuxt قابلیت های خیلی بیشتری دارد ولی بهبود سئو یکی از قابلیت های مهم این فریمورک است.
Vue یک فریمورک خیلی سبک است که هم با JavaScript و هم با TypeScript کار میکند. این فریمورک نسبت به رقبای خود نقاط قوت خوبی دارد مثل: سبک بودن، امکان استفاده در همه جا و به شکل های مختلف، ساختار خیلی ساده و قابل فهم و بازار کار خوب در ایران.