آموزش Vue 3 با ساخت داشبورد: یک پروژه عملی گام به گام
در این پلی لیست، شما با دنیای جذاب Vue.js آشنا خواهید شد و یاد خواهید گرفت که چگونه با استفاده از این فریمورک قدرتمند و ابزارهای مدرن مانند Vite و Tailwind CSS، اپلیکیشنهای وب پویا و تعاملی بسازید. در این دوره، به صورت گام به گام و با مثالهای عملی، مفاهیم زیر را یاد خواهید گرفت: مبانی Vue.js: کامپوننتها، دادههای واکنشگرا، محاسبات و واچرها، رویدادها Vite: ساخت پروژههای Vue.js با سرعت بالا و تجربه توسعه بهتر Tailwind CSS: طراحی رابط کاربری زیبا و واکنشگرا بدون نوشتن CSS زیاد Vue Router: مدیریت مسیرها و ایجاد Single Page Applications (SPA) Pinia: مدیریت حالت در اپلیکیشنهای Vue.js ساختار پروژه Vue: سازماندهی فایلها و پوشهها در یک پروژه Vue تست کردن اپلیکیشنهای Vue بهینهسازی عملکرد در پایان این دوره، شما قادر خواهید بود: اپلیکیشنهای Vue.js پیچیده و مقیاسپذیر بسازید. از جدیدترین ابزارها و تکنولوژیهای توسعه وب استفاده کنید. به جامعه بزرگ توسعهدهندگان Vue.js بپیوندید. این پلی لیست برای چه کسانی مناسب است؟ توسعهدهندگان مبتدی و متوسطی که میخواهند با Vue.js آشنا شوند. افرادی که به دنبال یادگیری یک فریمورک محبوب و قدرتمند برای توسعه فرانتاند هستند. کسانی که میخواهند پروژههای وب خود را با سرعت و کیفیت بالا توسعه دهند. پس همین حالا شروع کنید و به جمع توسعهدهندگان Vue.js بپیوندید! #Vuejs #Vite #TailwindCSS #آموزش_Vue #توسعه_وب #فریمورک_جاوااسکریپت نکته:
مسیر یادگیری
گام به گام با این ویدیوها پیشرفت کنید
آموزش Vue 3 • قسمت ۶: مدیریت وضعیت حرفهای با Pinia (جایگزین Vuex)
از پاس دادن پراپهای تو در تو (Prop Drilling) خسته شدی؟ 👾 تو این قسمت، میریم سراغ Pinia، راهکار رسمی و مدرن مدیریت وضعیت در Vue 3! یاد میگیریم چطور یک منبع دیتای متمرکز یا Store بسازیم تا هر کامپوننتی به راحتی بهش دسترسی داشته باشه. این ویدیو بخشی از یک پروژه یکپارچه "Mini Dashboard" است که در آن، سیستم مدیریت وضعیت کاربر (احراز هویت) و تم برنامه (تاریک/روشن) را با Pinia پیادهسازی میکنیم. ____________ در این قسمت چه چیزهایی یاد میگیریم؟ چرا به مدیریت وضعیت نیاز داریم و Pinia چه مشکلی را حل میکند؟ نصب و راهاندازی Pinia در یک پروژه Vue 3 + Vite. ساختار یک Store کامل با State, Getters و Actions. ایجاد یک Store ماژولار برای مدیریت اطلاعات کاربر (authStore). اتصال کامپوننتها به Store و نمایش دادههای واکنشگرا (Reactive) در UI. فراخوانی اکشنها برای تغییر وضعیت برنامه با یک کلیک. ____________ 🔗 لینکهای مفید: سورس کد پروژه در گیتهاب: https://github.com/unknownman/bw8-vue3-dashboad/tree/6 پلیلیست کامل دوره آموزش : https://www.youtube.com/playlist?list=PLr5b_fwV98wAy1D1JifuSYvS8qzKd9Vfp مستندات رسمی Pinia: https://pinia.vuejs.org/ ــــــــــــــــــــــــــــــ ✅ بخشهای مهم ویدیو 00:00 - مقدمه و معرفی مشکل (Prop Drilling) 01:36 - نصب و راهاندازی Pinia در پروژه 02:20 - ساخت اولین Store (authStore) 03:00 - تعریف State: دادههای اصلی Store 03:20 - تعریف Getters: دادههای محاسباتی 03:50 - تعریف Actions: متدهایی برای تغییر State 04:20 - اتصال Store به کامپوننت (Header.vue) 04:45 - نمایش دادهها و فراخوانی اکشنها در Template 05:30 - جمعبندی و چالش عملی (ساخت Theme Store)
قسمت پنجم : Composition API در Vue 3: بازسازی کامپوننت لیست با فیلتر و جستجو
در قسمت پنجم از سری آموزشهای جامع Vue.js 3، به سراغ Composition API، رویکرد پیشنهادی و مدرن Vue برای سازماندهی منطق کامپوننتها میرویم. در این ویدیو، کامپوننت لیستی که در قسمت قبل با Options API ساختیم را با استفاده از Composition API پیادهسازی میکنیم و به صورت عملی تفاوتها و مزایای این دو رویکرد را بررسی میکنیم. در این ویدیو یاد میگیرید: پیادهسازی کامل کامپوننت ItemList.vue با Composition API و script setup نحوه تعریف دادههای واکنشپذیر با ref پیادهسازی جستجو با computed فیلتر کردن لیست بر اساس دستهبندی با توابع معمولی بهینهسازی عملکرد با watchEffect و تکنیک debounce (پیادهسازی بدون کتابخانه خارجی) دریافت داده از کامپوننت والد با defineProps ارسال رویداد به کامپوننت والد با defineEmits این ویدیو برای توسعهدهندگانی که میخواهند با Composition API در Vue.js 3 آشنا شوند، کدنویسی بهتری داشته باشند و سرعت توسعه خود را افزایش دهند، بسیار مفید است. کد کامل پروژه در GitHub: https://github.com/unknownman/bw8-vue3-dashboad/tree/5 پلیلیست کامل آموزش Vue.js 3: : https://www.youtube.com/playlist?list=PLr5b_fwV98wAy1D1JifuSYvS8qzKd9Vfp
قسمت چهارم : Options API در Vue 3: ساخت کامپوننت لیست با فیلتر و جستجو
در قسمت چهارم از سری آموزشهای جامع Vue.js 3، به بررسی دقیق Options API، روش سنتی تعریف کامپوننتها در Vue، میپردازیم. در این ویدیو، با ساخت یک کامپوننت لیست کاربردی و حرفهای، تمامی مفاهیم کلیدی Options API را به صورت عملی یاد میگیریم. در این ویدیو یاد میگیرید: ساخت کامپوننت ItemList.vue از پایه: ایجاد ساختار اولیه کامپوننت و آشنایی با بخشهای template، script و style. نمایش دادههای پویا با data() و v-for: نحوه تعریف دادههای واکنشپذیر و استفاده از v-for برای نمایش لیست آیتمها. پیادهسازی جستجوی پیشرفته با computed(): فیلتر کردن لیست بر اساس عبارت جستجو با استفاده از ویژگیهای محاسباتی. فیلتر دستهبندی با methods(): اضافه کردن قابلیت فیلتر کردن لیست بر اساس دستهبندیهای مختلف. ارتباط بین کامپوننتها با props و emits: انتقال داده از کامپوننت والد به فرزند با props و ارسال رویداد از فرزند به والد با emits. استایلدهی حرفهای با Tailwind CSS و @apply: استفاده از کلاسهای utility Tailwind و @apply برای استایلدهی سریع و آسان کامپوننت. این ویدیو برای توسعهدهندگانی که میخواهند با Options API در Vue.js 3 آشنا شوند، پروژههای قدیمیتر Vue را درک کنند و یا مهارتهای خود را در Vue.js بهبود بخشند، بسیار مفید است. کد کامل پروژه: https://github.com/unknownman/bw8-vue3-dashboad/tree/4
قسمت سوم : آشنایی با بخش Script ؛ بررسی ساختار یک کامپوننت
به قسمت سوم از سری آموزشهای جامع Vue.js 3 خوش آمدید. در قسمتهای قبلی با مفاهیم اولیه Vue و بخش Template در کامپوننتها آشنا شدیم. در این قسمت به بررسی بخش بسیار مهم Script در کامپوننتهای Vue میپردازیم. بخش Script، جایی است که منطق اصلی برنامهی ما در آن نوشته میشود و رفتار و تعامل کامپوننت با سایر بخشهای برنامه را تعیین میکند. در این ویدیو به طور مفصل به موارد زیر خواهیم پرداخت: بخش Script چیست؟ توضیح خواهیم داد که بخش Script چه نقشی در ساختار یک کامپوننت Vue دارد و چگونه با Template و Style در ارتباط است. دادههای واکنشگرا (Reactive Data): نحوه تعریف دادههایی که با تغییر آنها، رابط کاربری به صورت خودکار بهروزرسانی میشود را با استفاده از data در Options API و ref در Composition API به شما آموزش میدهیم. متدها (Methods): روش تعریف توابعی که میتوانند رویدادها را مدیریت کنند و وضعیت کامپوننت را تغییر دهند را بررسی خواهیم کرد. Options API vs. Composition API: دو روش اصلی کدنویسی در بخش Script را با مثالهای عملی مقایسه و بررسی میکنیم و مزایا و معایب هر کدام را توضیح میدهیم. ساختار کامپوننتها و ثبت آنها: به صورت مختصر به ساختار سلسله مراتبی کامپوننتها و چگونگی ثبت آنها به صورت محلی و سراسری میپردازیم. معرفی Props، Events و Slots: مفاهیم کلیدی Props (انتقال داده به کامپوننت فرزند)، Events (ارتباط کامپوننت فرزند با والد) و Slots (توزیع محتوا در کامپوننتها) را به صورت مقدماتی معرفی میکنیم. در این قسمت، یک مثال ساده شمارنده را با هر دو روش Options API و Composition API پیادهسازی میکنیم تا به خوبی با این دو رویکرد آشنا شوید. تمرکز اصلی ما در این دوره بر روی Composition API خواهد بود، اما Options API را نیز برای درک بهتر و کار با پروژههای قدیمیتر بررسی خواهیم کرد. اگر میخواهید با قلب تپنده کامپوننتهای Vue.js یعنی بخش Script به طور کامل آشنا شوید، این ویدیو را از دست ندهید. ویدیو رو لایک کنید، سوالات و نظراتتون رو در بخش کامنتها بنویسید و برای ویدیوهای آموزشی بیشتر، کانال ما رو سابسکرایب کنید. قسمت قبلی : https://youtu.be/KcQ6FkzLnNE دوره آموزش Vue 3 : https://www.youtube.com/playlist?list=PLr5b_fwV98wAy1D1JifuSYvS8qzKd9Vfp
قسمت دوم : تسلط بر Template Syntax در Vue.js؛ ساخت دکمهای منعطف و قابل شخصیسازی
در این ویدیو، به صورت عملی به ساخت یک کامپوننت دکمه سفارشی در Vue.js میپردازیم و در فرآیند آن با قابلیت های بخش template در یک کامپوننت Vue آشنا میشویم؛ با استفاده از ویژگیهای قدرتمندی مانند $attrs و کتابخانهی استایلینگ Tailwind CSS، دکمهای ایجاد میکنیم که بتوان آن را به راحتی سفارشیسازی کرد و در پروژههای مختلف استفاده نمود. مباحثی که در این ویدیو پوشش داده میشود: آشنایی با app.config: یاد میگیریم چگونه تنظیمات جهانی اپلیکیشن Vue.js را پیکربندی کنیم. درک عمیق از $attrs: با استفاده از $attrs، به دکمههای خود امکان میدهیم تا هر اتریبیوتی را که به آنها داده میشود، به ارث ببرند. سفارشیسازی ظاهر دکمه با Tailwind CSS: با استفاده از کلاسهای Tailwind CSS، دکمههای خود را با رنگها، اندازهها و سبکهای مختلف طراحی میکنیم. ایجاد حالتهای مختلف برای دکمه: دکمههایی با حالتهای فعال، غیرفعال، بارگذاری، موفقیت و شکست ایجاد میکنیم. استفاده از v-if و v-else برای نمایش محتواهای شرطی: یاد میگیریم چگونه با استفاده از این دایرکتیوها، محتواهای مختلف را بر اساس شرایط نمایش دهیم. بهینهسازی کد با استفاده از Object.hasOwn: با استفاده از این متد، بررسی میکنیم که آیا یک آبجکت خاص دارای خاصیت خاصی است یا خیر. در پایان این ویدیو، شما قادر خواهید بود: کامپوننتهای دکمه سفارشی و قابل استفاده مجدد در Vue.js ایجاد کنید. از $attrs برای ایجاد کامپوننتهای منعطف استفاده کنید. با استفاده از Tailwind CSS، ظاهر دکمههای خود را به صورت دلخواه تغییر دهید. درک عمیقتری از Template Syntax در Vue.js به دست آورید. این ویدیو برای چه کسانی مناسب است: توسعهدهندگانی که میخواهند با Vue.js شروع کنند. توسعهدهندگانی که میخواهند مهارتهای خود را در ساخت کامپوننتهای سفارشی بهبود بخشند. افرادی که به دنبال ایجاد رابطهای کاربری زیبا و کاربرپسند هستند.
قسمت اول : راهاندازی اپلیکیشن VUE 3 : نصب و راهاندازی Vite, VUE و TailwindCSS
در این دوره آموزشی جامع و پروژه محور، شما با یکی از محبوبترین فریمورکهای جاوا اسکریپت یعنی Vue.js آشنا خواهید شد. همراه با ما، یک داشبورد حرفهای را با استفاده از ابزارهای قدرتمند Vite و Tailwind CSS توسعه خواهیم داد. ☑️ در این دوره یاد خواهید گرفت: Vue.js: مفاهیم پایه، کامپوننتها، مدیریت دادهها، روتر و ... Vite: ساخت پروژههای Vue.js با سرعت بالا و تجربه توسعه بهتر Tailwind CSS: طراحی رابط کاربری زیبا و واکنشگرا بدون نوشتن CSS زیاد ساختار پروژه Vue: درک عمیق از ساختار فایلها و پوشههای یک پروژه Vue مدیریت بستهها با npm: نصب و مدیریت وابستگیهای پروژه در این قسمت اول، به موارد زیر پرداختیم: معرفی Vue.js، Vite و Tailwind CSS نصب Node.js و npm ایجاد یک پروژه جدید Vue با Vite ساختار اولیه پروژه و فایلهای مهم آن نصب و پیکربندی Tailwind CSS ایجاد یک کامپوننت ساده و اعمال استایل با Tailwind CSS ________________ ☑️ در قسمتهای بعدی، به مباحث پیشرفتهتری مانند: کامپوننتهای سفارشی مدیریت حالت با Pinia روتر Vue تست واحد استایلینگ پیشرفته با Tailwind CSS و ... خواهیم پرداخت. اگر به توسعه وب با Vue.js علاقهمند هستید، این دوره برای شما مناسب است. حتی اگر هیچ تجربه قبلی در زمینه فریمورکهای جاوا اسکریپت ندارید، میتوانید به راحتی مفاهیم را یاد بگیرید. برای مشاهده قسمتهای بعدی، کانال ما را دنبال کنید. _______________ ☑️ لینکهای مفید: گیت هاب قسمت اول : https://github.com/unknownman/bw8-vue3-dashboad/tree/01 Node.js: https://nodejs.org/ npm: https://www.npmjs.com/ Vite: https://vitejs.dev/ Tailwind CSS: https://tailwindcss.com/ Vue.js: https://vuejs.org/ nvm (Node Version Manager): https://github.com/nvm-sh/nvm 📖 Visual Studio Extentions Tailwind CSS IntelliSense : https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss Vola : https://marketplace.visualstudio.com/items?itemName=vue.volar Prettier Formatter for Visual Studio Code : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Vue 3 snippets : https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets