VueJS: Giới thiệu Nuxt.js
Giải phóng thời gian, khai phóng năng lực
Nuxt.js là framework dùng để tạo các ứng dụng Vue.js, ta có thể chọn loại ứng dụng Universal, Static Generated hoặc Single Page.
Nuxt.js là gì?
Mục đích chính của Nuxt.js là render giao diện người dùng trong khi bỏ qua trừu tượng phân tán client/server.
Mục đích của ta là tạo một framework đủ linh hoạt để có thể sử dụng nó làm cơ sở dự án chính hoặc ngoài dự án hiện tại của ta dựa trên Node.js.
Nuxt.js thiết lập trước tất cả các cấu hình cần thiết giúp cho việc phát triển kết xuất máy chủ ứng dụng Vue.js thú vị hơn.
Ngoài ra, ta cũng có thể cung cấp tùy chọn triển khai khác gọi là: nuxt generate. Tùy chọn này sẽ xây một ứng dụng Vue.js tĩnh. Tùy chọn này có thể là bước lớn tiếp theo trong quá trình phát triển ứng dụng web với microservice.
Hơn nữ thì ta có thể sử dụng Nuxt.js để tạo các ứng dụng đơn trang (single page applications - spa) nhanh, hữu dụng để giữ lại các đặc điểm của Nuxt trong khi làm việc với các ứng dụng backoffice.
Là một framework, Nuxt.js có nhiều đặc điểm giúp ta trong quá trình phát triển giữa client side và server side như bất đồng bộ dữ liệu (Asynchronous Data), Middleware, Layouts, ...
Cách thức làm việc
Nuxt.js bao gồm những điều sau để tạo một bản phát triển ứng dụng web phong phú:
- Vue 2
- Vue Router
- Vuex (chỉ đưa vào khi sử dụng tùy chọn store option)
- Vue Server Renderer (bị loại trừ khi sử dụng chế độ mode: 'spa')
- vue-meta
Tổng kích thước chỉ 57kB min+gzip (60kB với Vuex).
Về mặt nền tảng ta sẽ sử dụng webpack với vue-loader và babel-loader đóng gói, phân tách code và thu nhỏ code.
Các đặc tính
- Viết các file Vue (
*.vue) - Tự động tách code
- Server-Side Rendering
- Hệ thống định tuyến mạnh mẽ với dữ liệu bất đồng bộ
- Phục vụ file tĩnh
- Dịch chuyển ES6/ES7
- Đóng gói và thu nhỏ JavaScript và CSS
- Quản lý phần tử
<head>(<title>,<meta>, ...) - Thay thế hot module trong phát triển
- Trình tiền xử lý: Sass, Less, Stylus, etc.
- Các header HTTP/2 đẩy sẵn sàng
- Mở rộng với kiến trúc module
Lược đồ
Lược đồ sau đây thể hiện những thành phần được gọi bởi Nuxt.js khi server được gọi hoặc khi người dùng điều hướng qua app với <nuxt-link>:
Server Rendered (Universal SSR)
Ta có thể sử dụng Nuxt.js như làm một framework để xử lý tất cả các kết xuất giao diện người dùng (UI) của project.
Khi khởi động nuxt, nó sẽ khởi động chế độ server development với hot-reloading và Vue Server Renderer được cấu hình để tự động kết xuất trình chủ của ứng dụng.
Ứng dụng đơn trang (SPA)
Nếu với bất kỳ lý do gì mà ta không thích sử dụng server side rendering hoặc cần hosting tĩnh cho ứng dụng thì bạn có thể đơn giản là sử dụng chế độ SPA bằng cách sử dụng nuxt --spa. Kết hợp với đặc tính generate, nó sẽ cho ta một cơ chế triển khai SPA mạnh mẽ mà không cần sử dụng Node.js runtime hay bất kỳ một xử lý server đặc biệt nào.
Hãy xem các lệnh để tìm hiểu thêm về ứng dụng.
Nếu ta đã có một server thì ta có thể đưa Nuxt.js vào bằng cách sử dụng nó như một middleware. Sẽ không có giới hạn nào khi sử dụng Nuxt.js cho việc phát triển ứng dụng web Universal của ta. Hãy xem Hướng dẫn lập trình sử dụng Nuxt.js.
Static Generated (kết xuất trước Pre-Rendering)
Cài tiến lớn của Nuxt.js nằm ở lệnh generate.
Khi xây dựng ứng dụng của ta thì nó sẽ tạo HTML cho tất cả các route và lưu nó vào một file.
Ví dụ, ta có cấu trúc file như sau:
-| pages/
----| about.vue
----| index.vue
Thì sẽ generate:
-| dist/
----| about/
------| index.html
----| index.html
Với điều này thì bạn có thể host ứng dụng web đã tạo trên bất kỳ hosting tĩnh nào!
Ví dụ điển hình nhất chính là The best example is this website. It is generated and hosted on Netlify, see our source code.
Ta không muốn tạo thủ công mỗi khi ta update kho lữu trữ tài liệu, nó sẽ kích hoạt một hook tới Netlify trong đó:
- Nhân bản nuxtjs.org repository
- Cài đặt các dependency thông qua
npm install - Chạy
npm run generate - Phục vụ thư mục
dist
Giờ thì ta đã có một ứng dụng web tạo tĩnh tự động.
Ta có thể làm ứng dụng web thương mại điện tử với nuxt generate và lưu trữ nó trên CDN. Mỗi khi một sản phẩm hết hàng hoặc tồn kho trở lại thì ta sẽ tạo một web app. Nhưng nếu người dùng điều hướng qua web app trong thời gian này thì nó sẽ cập nhật nhờ vào các lời gọi API được tạo tới API thương mại điện tử. Không cần phải có nhiều đối tượng server cũng như cache.
Giải phóng thời gian, khai phóng năng lực