Chia Sẻ Khóa Học Vue Developer 2023 Hoàn Chỉnh - Zero Đến Master (Pinia, Vitest) [Update Tháng 7-2023] [Khóa 7067 A]
Hướng dẫn tốt nhất về Vue 3 Development. Xây dựng các ứng dụng quy mô lớn và deploy to production. Đi từ Zero đến Master!
Bạn sẽ học được gì:
- ✓ Xây dựng các ứng dụng Vue cấp doanh nghiệp và triển khai vào production.
- ✓ File Upload, Testing, PWA, Internationalization, Authentication với Vue 3.
- ✓ Tìm hiểu cách xây dựng các ứng dụng có quy mô lớn, có hiệu suất cao, phản ứng nhanh như một senior developer.
- ✓ Tìm hiểu các tính năng mới nhất với Vue 3 bao gồm Composition API, Pinia, Vue Router, v.v.
- ✓ Tìm hiểu cách xây dựng các ứng dụng đẹp mắt bằng TailwindCSS, Sass, CSS Animations và Transitions.
- ✓ Làm chủ hệ sinh thái mới nhất của một Vue Developer ngay từ đầu.
- ✓ Trở thành top 10% VueJS Developer.
- ✓ Sử dụng Pinia (sự thay thế mới cho Vuex) cho state management trong các ứng dụng của bạn.
- ✓ Tìm hiểu cách so sánh sự cân bằng khi nói đến hiệu suất và khả năng mở rộng.
- ✓ Thiết lập authentication và user account.
- ✓ Sử dụng Firebase để xây dựng các ứng dụng full stack.
- ✓ Học cách lãnh đạo các dự án Vue bằng cách đưa ra các quyết định đúng đắn về kiến trúc và giúp đỡ những người khác trong team của bạn.
- ✓ Làm chủ Vue Design Pattern.
- ✓ Routing với Vue Router.
- ✓ Chuyển đổi ứng dụng thành Progressive Web App.
- ✓ Testing ứng dụng của bạn bằng Vitest, snapshot testing, và even E2E testing!
- ✓ Sử dụng JavaScript ES6/ES7/ES8/ES9/ES10/ES11 mới nhất để viết clean code.
- ✓ Tìm hiểu lý do tại sao Vue lại vượt xa React và Angular về mức độ phổ biến của developer!
Vừa cập nhật tất cả các tính năng mới nhất của Vue 3 cho năm 2023!
Sử dụng phiên bản mới nhất của Vue, khóa học này tập trung vào tính hiệu quả. Đừng bao giờ tốn thời gian vào những hướng dẫn khó hiểu, lỗi thời, không đầy đủ nữa.
Chúng tôi đảm bảo với bạn rằng đây là tài nguyên trực tuyến toàn diện nhất về Vue. Khóa học dựa trên dự án này sẽ giới thiệu cho bạn tất cả chuỗi công cụ hiện đại của một Vue JS developer vào năm 2023. Trong quá trình này, chúng tôi sẽ xây dựng một ứng dụng Music Player khổng lồ tương tự như Spotify bằng cách sử dụng Vue, Pinia, Vue Router, Composition API, Firebase, Vitest, Sass, v.v. Đây sẽ là một ứng dụng full stack, sử dụng Firebase.
Tất cả code sẽ được cung cấp từng bước và ngay cả khi bạn không thích code, bạn sẽ có quyền truy cập vào full master project code để bất kỳ ai đăng ký khóa học sẽ có dự án riêng của họ để đưa vào project của họ ngay lập tức.
Chương trình giảng dạy sẽ rất thực tế khi chúng tôi hướng dẫn bạn từ đầu đến cuối trong quá trình phát hành một dự án Vue chuyên nghiệp cho đến khi đưa vào sản xuất. Chúng tôi sẽ bắt đầu ngay từ đầu bằng cách dạy cho bạn những điều cơ bản về Vue và sau đó đi vào các chủ đề nâng cao để bạn có thể đưa ra quyết định đúng đắn về kiến trúc và các công cụ cho bất kỳ dự án VueJS nào trong tương lai của mình. Bạn sẽ yêu thích Vue nếu bạn là người mới làm quen với các front end framework hoặc thậm chí nếu bạn đến từ nền tảng React hoặc Angular!
Đây là những gì khóa học sẽ bao gồm:
1. FUNDAMENTAL - Trong phần này, chúng ta sẽ tìm hiểu về các nền tảng của Vue, chẳng hạn như các computed property, method, và watcher. Chỉ với những kiến thức cơ bản, chúng ta sẽ có thể thao tác với document với events, binding, và conditional rendering. Chúng ta cũng sẽ tìm hiểu cách gỡ lỗi một ứng dụng với các công cụ chính thức dành cho Vue Developer.
2. PROJECT: PERSPECTIVE PLAYGROUND - Trong phần này, chúng ta sẽ xây dựng dự án đầu tiên bằng cách tạo một CSS perspective playground. Điều này sẽ cho chúng ta cơ hội củng cố nhiều khái niệm cơ bản mà chúng ta đã học ở phần trước bằng cách phát triển một công cụ để trực quan hóa cách các thuộc tính CSS có thể điều khiển perspective của một element.
3. SAU CƠ BẢN - Trong phần này, chúng ta sẽ đi sâu vào hoạt động bên trong của Vue framework. Làm cách nào để các JavaScript framework add reactivity? Vue biên dịch các template thành các virtual DOM object như thế nào? Điều này sẽ giúp chúng ta hiểu rõ hơn về cách Vue có thể cung cấp một framework cho các ứng dụng hiện đại. Chúng ta cũng sẽ nói về lifecycle hooks và components.
4. TÌM HIỂU VỀ CÁC CÔNG CỤ - Trong phần này, chúng ta sẽ quay lại Vue một bước để nói về một số công cụ để phát triển ứng dụng. Trong suốt sự nghiệp của mình, bạn sẽ cần phải xử lý công cụ giúp chúng tôi phát triển các ứng dụng (ví dụ: Vite, Sass, PostCSS, ESLint). Chúng ta sẽ nói về cách cấu hình những công cụ này và tại sao chúng lại cần thiết.
5. CÁC COMPONENT NÂNG CAO - Trong phần này, chúng ta sẽ xây dựng một dự án Vue với Vite. Mục tiêu của Vue là làm cho trải nghiệm phát triển trở nên suôn sẻ và dễ dàng nhất có thể. Vue có thể giúp chúng ta xây dựng một dự án, định cấu hình các công cụ và chạy một server. Điều này làm giảm bớt rất nhiều nhiệm vụ tẻ nhạt hơn của việc phát triển web. Chúng ta sẽ có thể đi thẳng vào các component để xem cách chúng ta có thể kiến trúc một ứng dụng với các component bằng cách sử dụng props, emitting events, slots, và dynamically rendering content.
6. TRANSITIONS & ANIMATIONS - Trong phần này, chúng ta sẽ tìm hiểu cách thêm một số hiệu ứng hấp dẫn vào ứng dụng bằng cách thêm transitions và animations. Animations có thể thổi sức sống vào bất kỳ ứng dụng nào. Chúng cũng có thể cải thiện trải nghiệm người dùng bằng cách đưa ra phản hồi cho người dùng về hành động của họ. Chúng ta sẽ thảo luận về cách tạo ra animations bằng CSS và JavaScript. Cả hai đều được hỗ trợ trong Vue. Chúng ta thậm chí sẽ nói về Web Animations API mới nhất.
7. PROJECT: QUIZ APP - Trong phần này, chúng ta sẽ vận dụng mọi thứ đã học cho đến nay để phát triển một ứng dụng quiz. Quiz là một cách tuyệt vời để thu hút người dùng ở hầu hết mọi ngành.
8. MASTER PROJECT: GIỚI THIỆU VỀ PINIA - Trong phần này, chúng ta sẽ bắt đầu thực hiện master project cho khóa học này, đó là một ứng dụng music! Tải lên, quản lý và nghe nhạc mà không bị gián đoạn. Chúng tôi sẽ sử dụng TailwindCSS để giúp chúng tôi thiết kế một ứng dụng hiện đại đẹp mắt. Đó là new kid trong block đang được cộng đồng front-end dev đón nhận. Sau đó, chúng ta sẽ tìm hiểu về state management bằng cách sử dụng state library chính thức có tên PINIA (thay thế Vuex trong các cơ sở mã mới hơn).
9. MASTER PROJECT: FORM VALIDATION - Trong phần này, chúng ta sẽ thực hiện xác thực biểu mẫu để ngăn việc gửi dữ liệu không hợp lệ. Tai nạn xảy ra. Công việc của chúng tôi là đảm bảo kiểm tra những sai sót. Chúng ta sẽ tìm hiểu cách thực thi các quy tắc cho các tình huống khác nhau.
10. MASTER PROJECT: AUTHENTICATION - Trong phần này, chúng ta sẽ bắt đầu xác thực và đăng ký. Người dùng sẽ có thể đăng nhập ngay sau khi đăng ký tài khoản. Chúng tôi sẽ sử dụng Firebase làm giải pháp backend để quản lý và xác minh người dùng.
11. MASTER PROJECT: ROUTING - Trong phần này, chúng ta sẽ xử lý routing bằng thư viện Vue Router. Bên dưới, router library đang sử dụng history API để xử lý việc điều hướng. Nó cho phép chúng tôi chuyển đổi giữa các trang mà không cần làm mới nội dung. Chúng ta sẽ xem cách chúng tôi có thể sử dụng thư viện này để giúp bảo vệ các route, add meta fields và tùy chỉnh giao diện trang web của chúng tôi dựa trên route hiện tại.
12. MASTER PROJECT: UPLOAD FILE - Trong phần này, chúng ta sẽ bắt đầu tải tệp lên Firebase. Điều quan trọng là chúng tôi xác thực các tệp bằng Firebase. Chúng tôi không muốn người dùng vô tình tải xuống một tệp độc hại khi nghe nhạc. Chúng tôi sẽ đề cập đến cách thực thi xác thực với Firebase rules. Sau khi làm như vậy, chúng tôi sẽ lưu trữ thông tin bổ sung trong cơ sở dữ liệu. Chúng tôi thậm chí sẽ đề cập đến cách triển khai giải pháp dự phòng trong trường hợp không thể kéo thả.
13. MASTER PROJECT: PLAY MUSIC - Trong phần này, chúng ta sẽ bắt đầu làm cho audio player hoạt động được. Chúng tôi sẽ triển khai các tính năng cơ bản như phát/tạm dừng, lọc và hiển thị thời lượng hiện tại. Chúng tôi sẽ làm cho phần còn lại của trang web hoạt động bằng cách cho phép người dùng gửi nhận xét, duyệt nhạc và sắp xếp dữ liệu.
14. MASTER PROJECT: DIRECTIVES - Trong phần này, chúng ta sẽ tìm hiểu ngắn gọn về cách viết directives tùy chỉnh. Directives là các thuộc tính có thể mở rộng một phần tử với các thuộc tính và phương thức bổ sung. Chúng ta sẽ đề cập đến những điều cơ bản và xem xét các khái niệm nâng cao như modifiers và arguments.
15. MASTER PROJECT: INTERNATIONALIZATION - Trong phần này, chúng ta sẽ thêm internationalization vào một dự án để dịch một dự án sang nhiều ngôn ngữ. Có nhiều cách khác nhau để dịch một tin nhắn. Một số tin nhắn cần định dạng hoặc số nhiều. Chúng tôi cũng có thể dịch số (tức là tiền tệ). Chúng ta sẽ xem cách chuyển đổi giữa các ngôn ngữ bằng một vài dòng code.
16. MASTER PROJECT: PWA - Web đã chuyển sang phương pháp tiếp cận ưu tiên thiết bị di động. Trong phần này, chúng tôi sẽ thêm các tính năng PWA (Progressive Web App) để làm cho ứng dụng của chúng tôi thân thiện với thiết bị di động bằng cách sử dụng Workbox để lưu trữ tệp và lưu trữ dữ liệu với Firebase.
17. MASTER PROJECT: OPTIMIZATION - Trong phần này, chúng tôi sẽ thực hiện một số tối ưu hóa cuối cùng trước khi đưa ứng dụng của mình vào giai đoạn sản xuất. Có nhiều kỹ thuật và công cụ khác nhau mà chúng tôi sẽ xem xét để giúp tinh chỉnh ứng dụng của mình. Chúng ta có thể sử dụng Vite để chunk file và auto-register component. Chúng tôi sẽ thêm một số tính năng để giúp người dùng hiểu ứng dụng đang xử lý yêu cầu mang lại trải nghiệm thân thiện cho người dùng.
18. MASTER PROJECT: DEPLOYMENT - Trong phần này, chúng ta sẽ triển khai ứng dụng của mình lên Vercel chỉ bằng một lệnh! Nhanh chóng và dễ dàng.
19. MASTER PROJECT: TESTING - Trong phần này, chúng ta sẽ thảo luận về cách test một dự án với Vitest. Unit testing cho phép chúng ta test một tính năng một cách riêng biệt. Đây là loại testing phổ biến nhất mà bạn sẽ viết. Có một số vấn đề khi testing có thể được giải quyết với mocking. Bằng cách mocking code, chúng tôi sẽ có thể tách biệt các tính năng và test chúng. Sau đó, chúng tôi sẽ chuyển sang snapshot testing và E2E testing để kết hợp mọi thứ lại với nhau.
20. COMPOSITION API - Trong phần này, chúng ta sẽ thảo luận về tính năng mới nhất được giới thiệu trong Vue được gọi là composition API. Đó là một cách khác để xây dựng các component. Mặc dù Vue cung cấp một API đơn giản để viết các component nhưng vẫn có một số thiếu sót. Composition API giải quyết những vấn đề này. Chúng ta sẽ nói về lý do tại sao bạn muốn sử dụng composition API và hiểu lý do tại sao nó được giới thiệu.
Khóa học này không nhằm mục đích bắt bạn chỉ code mà không hiểu các nguyên tắc để khi hoàn thành khóa học, bạn không biết phải làm gì ngoài việc xem một hướng dẫn khác. KHÔNG! Khóa học này sẽ thúc đẩy bạn và thách thức bạn từ một người mới bắt đầu tuyệt đối về Vue trở thành người nằm trong top 10% Vue developer.
Chúng tôi đảm bảo với bạn đây là khóa học trực tuyến toàn diện nhất về Vue JS! Hãy xem video tóm tắt khóa học để biết tất cả các chủ đề chúng tôi sẽ đề cập, tất cả các dự án chúng tôi sẽ xây dựng và tất cả các kỹ thuật bạn sẽ học để trở thành một Vue developer hàng đầu!
Hẹn gặp bạn bên trong!
Mục lục:
- ✓ 01 - Giới thiệu.
- ✓ 02 - Vue Fundamentals.
- ✓ 03 - Project 1: Perspective Playground.
- ✓ 04 - Vue: Beyond Fundamentals.
- ✓ 05 - Vue Developer Environment.
- ✓ 06 - Vue Components nâng cao.
- ✓ 07 - Transitions & Animations.
- ✓ 08 - Project 2: Vue Quiz App.
- ✓ 09 - Master Project: Giới thiệu về Pinia.
- ✓ 10 - Master Project: Form Validation.
- ✓ 11 - Master Project: Authentication.
- ✓ 12 - Master Project: Routing.
- ✓ 13 - Master Project: Upload Files.
- ✓ 14 - Master Project: Play Music.
- ✓ 15 - Master Project: Directives.
- ✓ 16 - Master Project: Internationalization.
- ✓ 17 - Master Project: PWA (Progressive Web App).
- ✓ 18 - Master Project: Performance Optimizations.
- ✓ 19 - Master Project: Deployment + Production.
- ✓ 20 - Master Project: Testing ứng dụng Vue của bạn.
- ✓ 21 - Composition API.
- ✓ 22 - Component Design Patterns.
- ✓ 23 - Tiếp theo là gì ?
- ✓ 24 - Phụ lục: Extra Bits.
- ✓ 25 - PHẦN THƯỞNG.
Khóa học này dành cho ai:
- ✓ Những học viên quan tâm đến việc vượt qua hướng dẫn dành cho "người mới bắt đầu" thông thường.
- ✓ Lập trình viên muốn học những kỹ năng cần thiết nhất của một web developer.
- ✓ Các Developer muốn lọt vào top 10% Vue Developer.
- ✓ Những sinh viên muốn tích lũy kinh nghiệm làm việc trên một ứng dụng lớn có thể mở rộng.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU