عالیییی استاد دمت گرم ، واقعا اولین دوره vue ایه که تاحالا دیدم این قدر ساده توضیح داده بشه و در آخر هم ممنون بایت اینکه Nuxt رو هم به دوره اضافه کردین 🙏🙏
آموزش جامع Vue.js و Nuxt Js - پروژه محور
فریمورک Nuxt.js یا vue.js در حقیقت یک وب فریمورک رایگان و منبع باز به شمار میرود که با توجه به Vue js، Node js، Express js، Babel js و Webpack طراحی شده است. چارچوب گفته شده به عنوان فرایند فرعی برای تمامی برنامههای جهانی به شمار میرود. یکی از اصلیترین مزیتهایی که این فریمورک دارد میتوان به تنظیمات و راه اندازی برنامهها به صورت ساده و راحت اشاره کرد؛ که برای تمامی توسعه دهندهها این مزیت بسیار خوشایند میباشد. در ادامه با کدیاد آموزش جامع vue.js و nuxt js را خواهیم داشت.
در این دوره قصد داریم فریم ورک Vue.js را با هم بررسی و کار کنیم؛ تا شما به یک مختصص Vue تبدیل بشوید! ما الان و در این دوره قصد نداریم این را بررسی کنیم که Vue.js را چه کسی ساخته، کجا و در چه سالی ساخته. ما میخواهیم در این دوره یاد بگیریم که Vue چیست و چه پروژههایی میتوانیم با آن بزنیم. در ادامه نیز توضیحاتی در خصوص این دوره خواهیم گفت.
فریم ورک Vue. Js چیست؟
Vue. Js را میتوان به این صورت برای شما معرفی کرد که یک فریم ورک متن باز جاوا اسکریپ میباشد. از این فریمورک برای توسعه رابط کاربری استفاده میکنند. این فریمورک برای اولین بار در سال 2013 معرفی شده است. امروزه از Vue. Js به عنوان یک ابزار برای ساخت اپلیکیشنهای تحت وب سایت تک صفحهای و وب سایتهایی که در مقیاس بزرگ هستند، استفاده میشود. علاوه بر این موضوع با استفاده از Vue. Js میتوان کامپوننتهایی را به وجود آورد که در بخشهای مختلف یک پروژه استفاده میشود.
،Vue یکی از محبوبترین فریم ورکهای جاوا اسکریپت است. این فریم ورک بسیار راحت و قدرتمند است. البته اگر روش درستی را برای آموزش دیدن و یادگیری آن انتخاب کنید. یکی از مواردی که بیشتر افراد وقتی که وارد حوزهی جاوا اسکریپت می شوند و میخواهند یک فریم ورک یا یک کتابخانه را انتخاب کنند، با آن درگیر می شوند، این است که ماهها و هفتهها دنبال این هستند که بهترین را برگزینند و دائم به دنبال مقایسه فریم ورکها با هم هستند.
انواع فریم ورک ها
فریم ورک ها در انواع react، vue و angular دسته بندی می شوند. همهی اینها کار ما را راه میاندازند. فرقی ندارد که کدام را انتخاب کنید. هر کدام از اینها را که انتخاب کنیم، به روش خودشان، چیزی که ما میخواهیم را پیاده سازی میکنند. پس برای انتخاب یک فریم ورک جاوا اسکریپتی، تنها چیزی که لازم است برای شروع بدانید این است که آیا واقعا میخواهید یاد بگیرید یا نه؟
معایب فریم ورک react و angular چیست؟
بزرگترین مشکل برنامه نویسان زمان کار با این دو فریم ورک این است که خیلی زود به زود، ورژنهای آنها تغییر میکند. در نتیجه آن ها مجبور می شوند پروژهها را به آخرین ورژن upgrade کنند. آن ها اغلب به دنبال یک فریم ورک می گردند تا بتوانند این مشکل را تا حدودی برطرف کنند. پیشنهاد برنامه نویسانی که چند قدم از آن ها جلوتر، Vue.js است. حتی این فریم ورک از محبوبیت خاصی بین توسعهدهندگان برخوردار است. همچنین جزء تاپترین فریم ورکهای Front-End است؛ ولی متاسفانه چندان آموزش ویدیویی خوب برای Vue.js وجود ندارد. از این رو اغلب بنرامه نویسان مجبور می شوند ازdocument برای آموزش vue.js استفاده کنند. در حالی که مطالعه document برای آموزش فریم ورک یا یک زبان برنامهنویسی، خیلی خوب نیست و به سختی می توان چیزی از آن یاد گرفت.
بهترین روش یادگیری فریم ورک Vue.js
برای یادگیری یک فریم ورک مانند Vue.js یا یک زبان به صورت پیشرفته، تنها چیزی که لازم است پروژه زدن است. به طوری که بهتر است که در این زمینه تجربهی پروژه واقعی را کسب کنیم. از این رو شما با شرکت در این دوره، میتوانید از هر دورهای بی نیاز شوید. زیرا این دوره کاملا پروژه محور است. اگر در این دوره پا به پای جلسات پروژهها را انجام دهید؛ قطعا میتوانید در کمترین زمان ممکن به یک فراند کار حرفهای تبدیل شوید.
تنها چیزی که بعد از گذراندن این دوره نیاز دارید این است که پروژه بزنید و تجربهی پروژهی واقعی را کسب کنید. هر چند پروژه آخر این دوره واقعی است؛ اما شما باز هم نیاز دارید تجربه کسب کنید تا در این حوزه حرفی برای گفتن داشته باشید. اما بیاید بیشتر با این فریم ورک آن و محتویات دوره آشنا شویم.
کتابخانههای محبوب Vue js
همان طور که در بالاتر نیز به این موضوع اشاره کردیم Vue. Js برای توسعه رابط کاربری و برنامه نویسی اپلیکیشنهای تحت وب سایت استفاده میشود. در نتیجه بهتر است برای آموزش Vue.js اول Css3 و Html5 را آموزش ببینید که میتوانید آن را در دیگر دوره های کدیاد به راحتی پیدا کنید. همان طور که میدانیم Vue بر مبنای زبان برنامه نویسی جاوا اسکریپ طراحی شده است. از این رو علاوه بر آن بهتر است آشنایی کامل با برنامه نویسی شی گرا نیز داشته باشید. ویو همانند دیگر فریمورکها دارای کتابخانههای مختص به خود میباشد که هر یک از آنها قابلیتهای مختلفی را ارائه داده است که عبارتاند از:
- Element UI
- IView
- Vuetify
- Mint UI
فریم ورک Nuxt.js چیست؟
فریم ورک دیگری به نام Nuxt js وجود دارد که این فریمورک دارای سطح بسیار بالاتری نسبت به فریمورک قبلی میباشد. پایههای Nuxt js با توجه به Vue. Js طراحی شده است. Nuxt js امروزه توسعه اپلیکیشنهای تخت وب و یا اپلیکیشنهای جهانی Vue.js را راحتتر از قبل کرده است.
نحوه کار فریم ورک nuxt js
این فریمورکها برای ارائه هر نوع اپلیکیشن ساده hello world در هر ثانیه میتوانند پردازش 190.05 ریکوئست را داشته باشند؛ زمانی که شما نیازمند پردازش یک ریکوئست داری حدود 52.619 میلی ثانیه خواهید بود. با توجه به این موضوع به این نکته توجه داشته باشید این فریمورک نسبت به دیگر فریمورکهای موجود ضعیفتر عمل میکند. برخی از اصلیترین ویژگیهایی که این فریمورک دارد میتوان به دسترسی، عملکرد ساده و سئو قوی آن اشاره کرد. این فریمورک برای توسعه یک سایت پیشرفته نیازمند به اعمال زیر میباشد.
- Vue
- Vue Router
- Vuex or Pinia (تنها زمانی وجود دارد که از Store Option استفاده کنید)
- Vue Server Renderer
- Vue-meta
vue.js یک کتابخانه است یا فریمورک؟
برای آن که شما بتوانید درک کنید که vue.js یک فریمورک است و یا یک کتابخانه جامع برنامه نویسی بهتر است با تعریف این دو بیشتر آشنا شوید. کتابخانه در این حوزه به معنای مجموعهای از کدها، که برای هدف خاصی مورد استفاده قرار میگیرند، میباشد. فریم ورک نیز به معنای مجموعه ای از چندین کتابخانه، که با معماری بسیار خاصی در کنار یکدیگر قرار گرفتهاند، میباشد.
بدون شک تا به اینجا تفاوت میان این دو را متوجه شدهاید؛ اما سؤال ممکن است این باشد که در این قسمت از کدیاد، آموزش vue.js، کار با یک کتابخانه آموزش داده میشود و یا یک فریمورک؟ برای پاسخ به این سؤال بهتر است به این نکته توجه داشته باشید که vue.js یک کتابخانه بسیار ساده است که ظاهری شبیه به سایت دارد؛ اما هنگامی که در کنار یک کتابخانه دیگر قرار بگیرد میتوان از آن به عنوان یک وب سایت کامل SPA استفاده کرد.
ویژگیها و مزایا nuxt.js چیست؟
nuxt.jsامروزه به عنوان یک چارچوب انعطافپذیر برای توسعه دهندهها معرفی شده است. توسعه دهندهها از این فریمورک میتوانند به عنوان یک پایگاه داده اصلی استفاده کنند. علاوه بر این موضوع، این فریم ورک از تمامی ویژگیهای Vue.js استفاده کرده است. به زبان سادهتر توسعه دهندهها میتوانند به راحتی با این فریمورک برنامههای Vue.js را توسعه دهند. nuxt.js باید دارای برخی از اصلیترین ویژگیها باشد که در ادامه آنها را برای شما شرح دادهایم.
- امکان رندر کردن در سمت سرور
- مدیریت متدها با فایل بندیهای مناسب
- مدیریت متا تگها
- از دیگر ویژگیهای این فریمورک میتوان به عملکرد بهتر سئو، یادگیری آسان آن، کاربرپسند بودن آن اشاره کرد.
نحوه کار nuxt.js
این فریمورک دقیقاً به همان روشی عملکرد خود را نشان میدهد که یک فریمورک ساده از طرف سرور هنگام بازدید کاربران از یک وب سایت از خود نشان میدهند. در صورتی که RSS بر روی سیستم فعال شده باشد با هر بار که کاربرد صفحه مورد نظر خود را درخواست میکند، درخواست بر روی سرور رندر خواهد شد. در نتیجه برای nuxt.js شما نیازمند به یک سروری خواهید بود که بتوانید هر درخواستی را ارائه دهید. اقدامات و روشهای اصلی مورد استفاده در فریم ورک Nuxt.js عبارتاند از:
- اکشن nuxtServerInit
- تابع Validate
- asyncData
پیشنیازهای دوره آموزشی Vue.js و Nuxt.js 3 در آکادمی کدیاد چیست؟
برای آن که بتوانید این آموزش را به خوبی پشت سر بگذارید بهتر است می بایست در ابتدا با مباحث پایه بیشتر آشنایی داشته باشید. به عنوان مثال بهتر است با یادگیری HTML/CSS/JS شروع کنید. شما میتوانید تمامی این موارد را با دوره های آموزش برنامه نویسی آکادمی کدیاد پشت سر بگذارید. اگر با این موارد آشنایی دارید، برای شروع دوره آموزش جامع Vue.js و Nuxt.js 3 به صورت پروژه محور، آماده هستیند؟
سرفصل های دوره
پیشنیاز های شروع کار
استفاده از 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
چرخه حیات کامپوننت ها
ساخت پروژه و ایجاد قالب
تکمیل قالب پروژه و ساخت مدل ها
اعتبار سنجی 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
این دوره برای چه کسانی مناسـب است؟
- افرادی که به تازگی Javascript را یادگرفته اند یا افرادی که قصد یادگیری Vue.js و Nuxt.js را دارند
پیشنیاز های دوره چه چیزهایی هستند؟
- JavaScript
- HTML
- CSS
نظرات دانشجویان

پارسا رضایی |
دانشجوی دوره آموزش جامع Vue.js و Nuxt Js - پروژه محور

m m |
دانشجوی دوره آموزش جامع Vue.js و Nuxt Js - پروژه محور
سلام، خسته نباشید. استاد اشرافی عزیز ممنون بابت این دوره، بهترین قیمت با بالاترین کیفیت و مطالب.
مدرس دوره

محمد اشرافی
محمد اشرافی هستم ، برنامه نویس ، مدرس و مشاور در حوضه وب ، متولد 1380 ساکن شیراز از 17 سالگی به صورت خودآموز برنامه نویسی رو شروع کردم و در طول این 4 سال بیش از 50 پروژه تجاری بزرگ و کوچیک در حوضه وب انجام دادم و تا الان هر چیزی رو که یاد گرفتم به صورت آنلاین به دانشجویان دیگر منتقل کردم
سوالات متداول
در این دوره از 3 vuejs و Nuxt.js 3 استفاده کردهایم
در این دوره ما از صفر Vue.js 3 رو در قالب چندین پروژه عملی آموزش داده ایم تا شما کاملا با این فریمورک آشنا بشید و راحت بتوانید پروژه های خود را مدیریت کنید و در آخر هم با Nuxt 3 یک Market Place ( فروشگاه اینترنتی ) را با هم پیاده سازی کرده ایم که کاملا آماده بازار کار بشید ، پس در جواب این سوال باید بگیم ، بله شما بعد این دوره آماده بازار کار هستید ولی به شرطی که دوره رو با دقت نگاه کنید و تمرینات رو انجام بدین