Bắt đầu với Vue 3
captain
Đây là khóa học dành cho những người bắt đầu với phiên bản mới nhất của Vue.js - Vue 3. Hãy học các khái niệm cơ bản cần biết khi phát triển thực tế, từ nguyên lý hoạt động của Vue.js.
Cơ bản
Vue.js, Vue 3, JavaScript
Gặp gỡ Server-Side Rendering với Nuxt.js!
Giờ đây hãy sử dụng Vue.js mạnh mẽ hơn.
Bạn muốn sử dụng Vue.js tốt hơn?
Nếu bạn là nhà phát triển Vue thì có thể triển khai
Server Side Rendering thông qua Nuxt.
Nhưng mà,
server-side rendering là gì? 🤔
Render phía máy chủ (Server-side rendering) là kỹ thuật vẽ trang web trên máy chủ, sau đó gửi đến client (trình duyệt) và hiển thị lên màn hình. Kỹ thuật render phía máy chủ được sử dụng để tối ưu hóa công cụ tìm kiếm( SEO: Search Engine Optimization) và truyền tải chính xác thông tin trang web của bạn trên SNS.
Để triển khai kỹ thuật server-side rendering này, framework mà các nhà phát triển Vue.js thường sử dụng chính là Nuxt.js. Nó đóng vai trò giúp trang web bạn tạo ra được tiếp cận bởi nhiều người hơn.
Tuy nhiên, vì ở Hàn Quốc hiện chưa có khóa học chuyên sâu về Nuxt.js và cũng không có nhiều tài liệu tham khảo, nên tôi thường xuyên nhận được yêu cầu mở lớp học. Tôi hy vọng khóa học này sẽ trở thành tài liệu hữu ích cho những ai cần phát triển dịch vụ bằng Nuxt.js.
Để giúp ích cho những người
bắt đầu với Nuxt.js.
Từ tạo dự án đến triển khai dịch vụ,
chúng tôi sẽ đề cập đến
tất cả nội dung cần thiết khi phát triển với Nuxt.
"Tôi cần phải dùng Nuxt, nhưng cách phát triển khác với Vue như thế nào?"
Khóa học này phù hợp với những người chưa quen với khái niệm Server Side Rendering, những người cần phát triển bằng Nuxt.js tại công ty nhưng chưa từng sử dụng. Cùng tìm hiểu cách phát triển với Nuxt.js khác với Vue.js truyền thống như thế nào thông qua việc xây dựng một phần của trang web mua sắm đơn giản nhé?
✅ Người mới bắt đầu với Nuxt.js
✅ Người đã biết các khái niệm cơ bản về phát triển Vue.js nhưng chưa quen với server-side rendering
✅ Người đang thực hiện dự án Nuxt.js tại công ty nhưng khó nắm bắt nên bắt đầu từ đâu
✅ Lập trình viên frontend quan tâm đến server-side rendering
Giới thiệu về
người chia sẻ kiến thức đã tạo ra khóa học này 😎
Chúng tôi chia sẻ
bí quyết từ chuyên gia phát triển thực tế 🎁
Khám phá những điểm đặc biệt
của khóa học này ✨
Cung cấp tài liệu giảng dạy.
Bạn có thể dễ dàng hiểu các khái niệm chính về Nuxt.js và Server Side Rendering được đề cập trong khóa học thông qua giáo án và hình ảnh được biên soạn chi tiết.
Hãy tự tay xây dựng website.
Bạn có thể tự nhiên nắm vững ưu điểm và cú pháp của Nuxt.js trong khi xây dựng trang web thương mại điện tử. (Thực hành trên 70%)
so sánh cấu trúc một cách tự nhiên.
Nội dung series Vue.js của Captain Pangyo được giải thích bằng cách so sánh với cấu trúc single page để kết nối tự nhiên với khóa học Nuxt.js.
📢 Vui lòng kiểm tra kiến thức tiên quyết!
- Khóa học này là khóa học liên kết với chuỗi Vue.js của Captain Pangyo. (1) Bắt đầu với Vue.js - (2) Vue.js trung cấp - (3) Hướng dẫn hoàn chỉnh Vue.js - (4) Hoàn thiện Vue.js là khóa học phù hợp cho những bạn đã học tất cả các khóa, vì vậy hãy nhớ hoàn thành các khóa học tiên quyết nhé 🙂
Chúng tôi sẽ cho bạn biết
nội dung học trong khóa học 🎈
Render phía máy chủ
Giải thích chi tiết về sự khác biệt khi phát triển với dự án được tạo bằng Vue CLI truyền thống, cách thức hoạt động của Server Side Rendering và các lợi ích của nó.
Hiểu cách thức hoạt động của Server-Side Rendering
Giúp bạn dễ dàng hiểu các khái niệm đã học bằng mắt thông qua việc so sánh giữa trang web có áp dụng SSR thực tế và trang web không áp dụng.
Hiểu về mẫu bố cục
Giải thích chi tiết sơ đồ để hiểu component layout của Nuxt.js và sự khác biệt với ứng dụng single page truyền thống.
Quy tắc ESLint của Nuxt.js
Giải thích các quy tắc ESLint được tăng cường trong Nuxt.js so với dự án Vue CLI. Tìm hiểu cách ESLint thực sự được áp dụng trong code.
Cấu hình và tích hợp máy chủ API Backend
Hướng dẫn cách cấu hình máy chủ API backend để phát triển trang web thương mại điện tử. Các bước để cấu hình máy chủ sẽ được cung cấp hướng dẫn để bạn có thể tự thực hiện ngay cả sau khóa học.
Phương pháp thiết kế component
Hướng dẫn về phương pháp thiết kế component cần cân nhắc trong các framework dựa trên component như React, Vue và review nội dung đã được triển khai.
Xây dựng trang web tương tự như trung tâm mua sắm
Chúng ta sẽ tạo một trang web tương tự như trang thương mại điện tử bằng cách kết nối với API thực tế. Trong quá trình tạo, chúng ta sẽ lần lượt áp dụng từng khái niệm của Nuxt.js và tìm hiểu sự khác biệt so với ứng dụng Vue.js truyền thống.
Chỉ thực hiện markup & styling ở mức cần thiết
Chỉ thực hiện markup bố cục chính và styling cần thiết cho phát triển giao diện, styling chi tiết sẽ được cung cấp qua mã nguồn trên kho lưu trữ GitHub. Bạn có thể tập trung vào việc học các khái niệm của Nuxt.js, giúp học tập nhanh chóng và hiệu quả.
Câu hỏi thường gặp 💬
Q. Tôi mới tiếp xúc với Vue.js lần đầu, liệu tôi có thể học khóa học này không?
Khóa học này phù hợp với những người đã nắm được các khái niệm cơ bản của Vue.js. Nuxt.js có thể được xem như một framework bổ sung thêm một số quy tắc vào kiến thức nền tảng cần thiết khi phát triển với Vue.js. Tôi khuyên bạn nên hoàn thành các khóa học Vue.js series của Captain Pangyo từ Bắt đầu đến Hoàn thành trước khi học khóa này.
Q. Tôi hoàn toàn không biết khái niệm Server Side Rendering thì có nên học khóa này không?
Vâng, bạn có thể học. Khóa học không chỉ đề cập đến API và cách sử dụng Nuxt.js mà còn giải thích chi tiết từng phần về lý do tại sao nên sử dụng server-side rendering, sự khác biệt giữa nó với client-side rendering truyền thống (single page application) là gì. Sau khi hoàn thành khóa học, bạn sẽ có thể nắm vững khái niệm về server-side rendering.
Q. Tôi mới bắt đầu phát triển frontend, liệu có nên học khóa này không?
Khóa học này không phù hợp với những bạn mới bắt đầu học lập trình frontend. Khóa học được thiết kế dành cho những người đã có kiến thức cơ bản về HTML, CSS, JS. Tôi khuyến nghị bạn nên học khóa này khi đã hiểu ít nhất các khái niệm cơ bản của Vue.js và khái niệm Single Page Application sử dụng router.
Q. Vue.js 3 đã ra mắt rồi, khóa học này sẽ sử dụng Vue 3 hay Vue 2?
Khóa học này được tiến hành dựa trên Vue 2. Phiên bản chính thức của Nuxt.js dựa trên Vue 3 vẫn chưa được phát hành và Vue 3 cũng còn nhiều hạn chế để sử dụng trong thực tế, vì vậy khóa học được xây dựng dựa trên Vue 2 để có thể áp dụng ngay sau khi học. Sau này khi hệ sinh thái dựa trên Vue 3 ổn định hơn, chúng tôi sẽ cập nhật thêm nội dung về Vue 3, mong bạn lưu ý nhé :)
※ Tất cả nội dung học được từ Vue 2 đều có thể áp dụng trực tiếp vào Vue 3. Sự khác biệt giữa Vue 2 và Vue 3 có thể được xem là chỉ khoảng 1 API chính, và không có sự khác biệt lớn.
Bạn muốn biết thêm về
các khóa học khác của Captain Pangyo?
Giới thiệu người chia sẻ kiến thức 👨🏫
Captain Pangyo
- Lập trình viên front-end với 13 năm kinh nghiệm
- Tác giả của "Do it! Vue.js 입문" , "쉽게 시작하는 타입스크립트"
- Giảng dạy Vue.js tại Naver, eBay Korea, Samsung, LG, SK Group, v.v.
- Khóa học Vue.js Chinh phục Camp của Fastcampus
- Người dịch trang web công nghệ web chính thức của Google
- Blog công nghệ, Github
"Tôi dùng doanh thu từ khóa học để hỗ trợ Vue.js mã nguồn mở +
Sinh Hoạt Coding 😁"
Chúng tôi cung cấp giảm giá khóa học!
Chuỗi bài "Lộ trình nhà phát triển Frontend
hoàn thiện với Vue.js" giảm giá 25% (Nhấp vào)
Giảm giá 50% cho học sinh
trung học, phổ thông và sinh viên đại học không có thu nhập (nhấp vào)
Tôi là một sinh viên đại học đã học tập chăm chỉ được hai tháng vì tôi bắt đầu quan tâm đến front-end! Mình học mơ hồ không hiểu và thực sự rất khó khăn nhưng tình cờ gặp được đội trưởng Pangyo và bây giờ mình đang nghe tất cả các bài giảng và ôn tập! Nhờ có bạn mà tôi nghĩ mình đang học tốt và có định hướng tốt. Các bài giảng thực sự hay, và bài giảng tiếp theo này rất hữu ích. Cá nhân tôi cảm ơn bạn rất nhiều! Nếu một khóa học mới ra mắt trong tương lai, tôi sẽ tham gia ngay.
Tôi là một nhà phát triển phụ trợ. Sau khi nghe những bài giảng xuất sắc ở cấp độ cao nhất của Giáo sư Jang Ki-hyo, tôi đã học được rất nhiều điều về phát triển web. Có sự quan tâm to lớn. Tuy nhiên, diện mạo cuối cùng của hệ thống tôi muốn triển khai là Đó là Nuxt3(SEO) + Vue3. Người ta nói rằng Nuxt3 cũng đã được phát hành gần đây. Chúng tôi muốn yêu cầu đào tạo dựa trên Nuxt3. Tôi đã nghe video YouTube Vuetify2 và nó không khó như tôi nghĩ. Theo trang web chính thức, Vuetify3 sẽ được phát hành vào nửa đầu năm tới. Tôi thấy nó. Cảm ơn bạn vì sự giáo dục tốt. ^^
Hiện chưa có hoặc hiếm có sách hoặc bài giảng nào liên quan đến Nuxt ở Hàn Quốc, nhưng đây là một sự trợ giúp tuyệt vời. Có kế hoạch nào cho bài giảng nuxt mã hóa bản sao ở cấp độ bán thực tế không? Ví dụ: cấu hình bằng các gói như nuxt-auth hoặc cấu hình mô-đun API... Tôi tò mò về cách bạn định cấu hình nó trong nuxt!!
Vì mình chỉ dùng vue nên có rất nhiều thứ mình phải cấu hình ngay từ đầu, nhưng vì mình dùng nuxt framework nên có nhiều thứ được hỗ trợ và SSR là một lợi thế lớn.
Đây là phiên bản cũ hơn nên cách tạo dự án hơi khác một chút mình nghĩ sẽ tốt hơn nếu bạn nâng cấp nó giống như bài giảng Vue 3.
![Planner, học phát triển web ở cấp độ này thì sao? [Lý thuyết + Thực hành]Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?w=420)
