لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش Vue JS 3: The Composition API (Inc Script Setup, TypeScript)
Vue JS 3: The Composition API (Inc Script Setup, TypeScript)
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
Vue.js 3 را با TypeScript، Composition API و Pinia (2022) بیاموزید Vue js 3 TypeScript Unit Testing Composition Fundamentals الگوهای طراحی سیستم واکنش پذیری جدید پیش نیازها:جاوا اسکریپت مدرن برخی از تجربه Vue 2 یک مزیت خواهد بود!
(ضبط مجدد ژوئیه 2022، به روز شده در اکتبر 2020 با آزمایش)
Vue.js 3 و Composition API اینجاست!
بیاموزید که با Composition API، TypeScript، Pinia و Vue Router که توسط Lachlan Miller آموزش داده شده است، یک برنامه دنیای واقعی و پیچیده بسازید. نگهدارنده Vue Test Utils و عضو تیم Vue.js. این یک دوره آموزشی متوسط تا پیشرفته است که هدف آن توسعه دهندگانی است که تجربه اولیه برنامه نویسی با ابزارهایی مانند ES6 JavaScript دارند.
ما به سرعت حرکت می کنیم و همه موضوعات مورد نیاز را برای ساختن برنامه های تک صفحه ای بسیار پویا و پیچیده با Vue.js 3 و Composition API جدید معرفی می کنیم.
برخلاف دورههای دیگر، آزمایش و الگوهای طراحی هسته اصلی هر کاری است که ما انجام میدهیم. ویژگیهای جدیدی را که Vue.js 3 به میز آورده است بررسی میکنیم. برخی از چیزهایی که یاد خواهید گرفت:
- نحوه استفاده و آزمایش اجزای جدید Vue 3 با Cypress و Test Utils
- ساخت ماژول های قابل استفاده مجدد با استفاده از API واکنش پذیری جدید
- TypeScript برای ایجاد نوع برنامه های کاربردی امن
- ایجاد یک ویرایشگر نشانه گذاری پیچیده و بلادرنگ
- یکپارچه سازی کتابخانه های شخص ثالث از npm
- اجرای احراز هویت و مجوز با JWT (JSON Web Tokens) و کوکی ها
- مسیریابی، شامل محافظ های ناوبری با Vue Router 4
- نوشتن و آزمایش تعاملات پیچیده (Vitest، Vue Test Utils)
- یک بک اند واقعی با Express و TypeScript
این یک دوره متوسط تا پیشرفته است. برخی از دانش برنامه نویسی اولیه مورد نیاز است. من به وقت شما احترام می گذارم و تا حد امکان مطالب را در دوره گنجانده ام. به جای توضیح مفاهیم اولیه یکسان 10 بار، به سرعت حرکت کنید و مفاهیم مشابه را در زمینه های مختلف مشاهده کنید تا آنها را تقویت کنید.
سرفصل ها و درس ها
Composition API و مبانی تست
Composition API and Testing Basics
معرفی دوره و مدرس!
Introduction to Course and Lecturer!
منابع
Resources
نصب و پیکربندی
Installation and Configuration
Bulma CSS
Bulma CSS
اجزای فایل واحد Vue
Vue Single File Components
دستورالعمل ها - حلقه ها با v-for
Directives - Loops with v-for
اتصالات با v-bind
Bindings with v-bind
رویدادها و واکنش پذیری
Events and Reactivity
بیشتر در مورد رویدادها
More on Events
واکنش پذیری با Ref
Reactivity with Ref
Safety را با TypeScript تایپ کنید
Type Safety with TypeScript
DateTimes با Luxon
DateTimes with Luxon
داده های مشتق شده با محاسبه شده
Derived Data with Computed
انتقال داده با Props و Refactor
Passing Data with Props and a Refactor
بارگیری با Suspense و Reactive Store از ابتدا
Loading with Suspense and a Reactive Store from Scratch
ایجاد یک فروشگاه واکنشی سفارشی
Creating a Custom Reactive Store
اشتباه: نصب Pinia
Errata: Installing Pinia
انتقال به پینیا برای مدیریت دولتی
Moving to Pinia for State Management
ساختارهای داده دولتی
State Data Structures
استخراج پیچیدگی
Extracting Complexity
یک بیت از Node.js
A Bit of Node.js
واکشی داده ها با Fetch
Fetching Data with Fetch
بارگیری ایالات با تعلیق
Loading States with Suspense
روتر Vue، ایجاد پست با علامت گذاری و برجسته سازی نحو
Vue Router, Creating Posts with Markdown and Syntax Highlighting
مقدمه ای بر ماژول - مسیریابی و پست ها
Introduction to Module - Routing and Posts
مسیریابی با روتر Vue
Routing with Vue Router
مسیر پست جدید
New Post Route
ایجاد مولفه Post Writer
Creating the Post Writer Component
اتصال دو طرفه با مدل v
Two way binding with v-model
دسترسی DOM با Refs الگو
DOM Access with Template Refs
دو طرفه صحافی با محتوای قابل ویرایش
Two Way Binding with content editable
Reactive Markdown با watchEffect
Reactive Markdown with watchEffect
برجسته سازی نحو!
Syntax Highlighting!
بهینه سازی با انحراف
Optimization with debounce
ارسال یک پست جدید
Posting a New Post
Node.js - Post Endpoint
Node.js - Post Endpoint
ارسال درخواست و داده های ماندگار
Post Request and Persisting Data
ثبت نام کاربر، اعتبارسنجی و اجزای قابل استفاده مجدد
User Sign Up, Validation and Reuseble Components
مقدمه ای بر ماژول - تله پورت و فرم ها
Introduction to Module - Teleport and Forms
Teleport for Modals
Teleport for Modals
ایجاد useModal Composable
Creating the useModal Composable
v-model با اجزای سفارشی
v-model with Custom Components
اعتبار سنجی آگنوستیک چارچوب - قسمت 1
Framework Agnostic Validation - Part 1
اعتبار سنجی آگنوستیک چارچوب - قسمت 2
Framework Agnostic Validation - Part 2
پیوند اعتبارسنجی و ورودیهای فرم
Linking Validation and Form Inputs
ارسال فرم و اصلاح کننده رویداد
Submitting the Form and Event Modifiers
تعریف فروشگاه کاربران
Defining the Users Store
Node.js - نقطه پایانی ایجاد کاربر
Node.js - User Creation Endpoint
نکات مهم احراز هویت
Ins and Outs of Authentication
مقدمه ای بر ماژول - احراز هویت
Introduction to Module - Authentication
Tooling - Vite Proxy Configuration
Tooling - Vite Proxy Configuration
امضای JWT
Signing a JWT
احراز هویت کاربران
Authenticating Users
ارائه مشروط برای کاربران احراز هویت شده
Conditionally Rendering for Authenticated Users
پیاده سازی خروج
Implementing Logout
قدرت اجزای پویا
The Power of Dynamic Components
ساخت UserForm عمومی برای ثبت نام و ورود به سیستم
Making UserForm Generic for Sign Up and Sign In
مدیریت ورود ناموفق
Handling Failed Login
Node.js - Login Endpoint
Node.js - Login Endpoint
مشق شب و تمرین!
Homework and Exercises!
اتمام برنامه، استقرار و مراحل بعدی!
Finishing the App, Deployment and Next Steps!
مقدمه ای بر ماژول - مجوز و پایان کار
Introduction to Module - Authorization and Finishing Touches
روتر Vue و گاردهای ناوبری
Vue Router and Navigation Guards
نمایش پست ها
Showing Posts
ویرایش پست ها
Editing Posts
ارتباط پست ها با کاربران
Associating Posts with Users
ویرایش مشروط پست ها
Conditionally Editing Posts
یک Refactor ضروری که توسط TypeScript هدایت می شود
An Essential Refactor Guided by TypeScript
Node.js - نقطه پایانی را برای بهروزرسانیها قرار دهید
Node.js - PUT Endpoint for Updates
حل شرایط مسابقه
Solving the Race Condition
استقرار در تولید - دیجیتال اقیانوس و Nginx
Deploying to Production - Digital Ocean and Nginx
توصیه های جدایی و مراحل بعدی!
Parting Recommendations and Next Steps!
تست (Cypress، Test Utils، Vite)
Testing (Cypress, Test Utils, Vite)
تست کامپوننت (Vitest، Vue Test Utils)
Component Testing (Vitest, Vue Test Utils)
راه اندازی Vitest
Setting Up Vitest
ابزارهای دیگر
Other Tools
کامپوننت نصب با Vue Test Utils
Mounting Component with Vue Test Utils
تعامل با کامپوننت ها با استفاده از Trigger
Interacting with Components using Trigger
نصب پلاگین در تست ها
Installing Plugins in Tests
تست Navbar و وضعیت Auth
Testing Navbar and Auth Status
کلنگ زدن جهانی ها با Vitest
Stubbing Globals with Vitest
تست تله پورت
Testing Teleport
فرم های تست و رویدادهای منتشر شده
Testing Forms and Emitted Events
تست های Async و Snapshot های درون خطی
Async Tests and Inline Snapshots
برخی از TSX و فلسفه تست
Some TSX and Testing Philosophy
یودمی یکی از بزرگترین پلتفرمهای آموزشی آنلاین است که به میلیونها کاربر در سراسر جهان امکان دسترسی به دورههای متنوع و کاربردی را فراهم میکند. این پلتفرم امکان آموزش در زمینههای مختلف از فناوری اطلاعات و برنامهنویسی گرفته تا زبانهای خارجی، مدیریت، و هنر را به کاربران ارائه میدهد. با استفاده از یودمی، کاربران میتوانند به صورت انعطافپذیر و بهینه، مهارتهای جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.
یکی از ویژگیهای برجسته یودمی، کیفیت بالای دورهها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد میدهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و میتوانند به بهترین شکل ممکن از آموزشها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرمهای آموزشی آنلاین، به افراد امکان میدهد تا به راحتی و با کیفیت، مهارتهای مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.
مهندس نرم افزار لاچلان یک توسعه دهنده کامل نرم افزار پشته ، علاقه مند به منبع باز ، توسعه آزمون آزمایشی و راهنمایی است. او از سال 2016 در انجمن منبع باز Vue.js همکاری می کند و نگهدارنده Vue Test Utils ، کتابخانه آزمایش رسمی Vue.js است.
Lachlan با تیم های کوچک و بزرگ کار کرده است ، هم به عنوان یک توسعه دهنده پشته کامل و هم به عنوان یک مربی ، آموزش و راهنمایی در زمینه طراحی برنامه های greenfield و همچنین انتقال برنامه های موجود به برنامه های مدرن جدید و بسیار پویا را ارائه می دهد.
نمایش نظرات