Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Giới thiệu Nuxt.js
Similar to Giới thiệu Nuxt.js (20)
Giới thiệu Nuxt.js
- 1. http://techmaster.vn Giới thiệu Nuxt.js Đặng Quang Huy, robin@techmaster.vn
- 2. http://techmaster.vn Nội dung 1. Nuxt.js là gì ? 2. Tính năng nổi bật của Nuxt.js 3. Demo ứng dụng đơn giản bằng Nuxt.js
- 4. http://techmaster.vn Nuxt.js là gì ? • Là một frame work để tạo ra một Universal Vue.js Applications. • Nuxt.js đã được cấu hình sẵn những thứ cần thiết để giúp cho việc phát triển ứng dụng được dễ dàng hơn.
- 5. http://techmaster.vn Universal Vue.js Applications • Là ứng dụng được viết bằng Vue.js. • Có thể chạy được cả ở trên server lẫn client.
- 7. http://techmaster.vn Website truyền thống • Toàn bộ phần xử lý dữ liệu, render View được thực hiện phía server (Server side rendering). • Theo kiến trúc monolithic, phù hợp với các ứng dụng vừa và nhỏ, có giao diện không quá phức tạp.
- 9. http://techmaster.vn Single Page App (SSR) • Chỉ xử lý phần giao diện, tách biệt ra khỏi code backend nên dễ dàng xây dựng các ứng dụng có giao diện phức tạp, có nhiều tương tác với người dùng. • Khó SEO do dữ liệu được cập nhật bằng Javascript chứ không được render sẵn.
- 10. http://techmaster.vn Universal App • Kết hợp giữa SSR và SPA. • Hỗ trợ SEO tốt. • Tách biệt được phần View và phần xử lý dữ liệu (thích hợp với kiến trúc micro service).
- 11. http://techmaster.vn Tính năng nổi bật của Nuxt.js
- 12. http://techmaster.vn Cấu trúc thư mục rõ ràng • Viết code Vue.js trên các file .vue. • Chia website ra nhiều trang (pages), mỗi pages là một file riêng. • Chia layouts, components, plugins, … giúp code dễ bảo trì và tái sử dụng.
- 13. http://techmaster.vn SSR & Routing system • Hỗ trợ SSR bằng cách cung cấp một số hàm để thao tác khi lấy dữ liệu, render view, … mà không cần biết về code backend (sử dụng Node.js). • Routing theo convention là tên file, hỗ trợ dynamic routes, nested routes, … (sử dụng vue-router).
- 14. http://techmaster.vn Transpilation, bundling & minifying • Biên dịch code ES6/ES7 để có thể chạy được trên các trình duyệt chưa hỗ trợ (sử dụng Babel). • Bundling & minifying code HTML, CSS & JS (sử dụng webpack và một số thư viện đi kèm).
- 15. http://techmaster.vn Và nhiều tính năng khác • Automatic code splitting: Chia nhỏ code, chỉ load những phần mà trang cần dùng đến để cải thiện performance. • Quản lý nội dung thẻ <head> hỗ trợ SEO tốt hơn. • Hot reload trong môi trường development. • …
- 16. http://techmaster.vn Demo ứng dụng đơn giản bằng Nuxt.js
- 17. http://techmaster.vn Khởi tạo project Download file .zip starter template hoặc cài bằng vue-cli: vue init nuxt-community/starter-template <project-name>
- 18. http://techmaster.vn Chạy project • Cài dependencies: $ cd <project-name> $ npm install • Chạy môi trường dev bằng lệnh: $ npm run dev
- 19. http://techmaster.vn Kết quả Website sẽ chạy ở địa chỉ http://localhost:3000
- 20. http://techmaster.vn Tham khảo • Trang chủ: https://nuxtjs.org/ • Mã nguồn: https://github.com/nuxt/nuxt.js • Một vài thư viện, tutorial, example về nuxt: https://github.com/nuxt-community/awesome-nuxt