Giới thiệu Nuxt.js

http://techmaster.vn
Giới thiệu Nuxt.js
Đặng Quang Huy, robin@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

Nuxt.js là gì ?

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.

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.

Website truyền thống

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.

Single Page App

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.

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).

Tính năng nổi bật của Nuxt.js

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.

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).

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).

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.
• …

Demo ứng dụng đơn giản bằng
Nuxt.js

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>

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

Kết quả
Website sẽ chạy ở địa chỉ http://localhost:3000

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

Giới thiệu Nuxt.js

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Giới thiệu Nuxt.js

Similaire à Giới thiệu Nuxt.js (20)

Giới thiệu Nuxt.js