Các thành phần di động tốt nhất cho các ứng dụng web tiến bộ trong VueJs

Ứng dụng web lũy tiến (Nguồn: https://developers.google.com/web/proTHERive-web-apps/images/pwa-fast.png)

Vào năm 2015, nhà thiết kế Frances Berriman và kỹ sư Google Chrome Alex Russell đã đặt ra thuật ngữ Ứng dụng web tiến bộ của Đức, để mô tả các ứng dụng tận dụng các tính năng mới được hỗ trợ bởi các trình duyệt hiện đại cho phép người dùng nâng cấp ứng dụng web lên các ứng dụng web tiến bộ trong hệ điều hành gốc (HĐH) . Họ rất đáng tin cậy, nhanh chóng và hấp dẫn. Nói tóm lại, nó là một cú hích để mang lại sức mạnh bản địa cho web. Ngày nay, PWA đã phát triển lớn hơn, tại đây, giới thiệu trang web sử dụng PWA, bạn có thể kiểm tra tại đây.

Gần đây trong Google IO 2017, Addy Osmani (Giám đốc kỹ thuật tại Google làm việc trên Chrome & Web Platform) đã nói về pwa trong nhiều khung javascript bao gồm vuejs.

Hai tháng trước Google IO, Addy Osmani đã gửi vấn đề đến kho lưu trữ chính thức của vuejs để đề xuất mẫu chính thức của vue pwa cho vue-cli, sau đó Evan You với tư cách là tác giả của vuejs đã đồng ý với Addy tựa đề xuất. Vì vậy, sau Google IO, chính xác là vào ngày 1 tháng 6 năm 2017 Addy đã phát hành mẫu pwa trong vue-cli. Bây giờ bạn có thể tạo dự án pwa bằng cách gõ lệnh trong thiết bị đầu cuối của bạn như thế này.

$ vue init pwa 

Mẫu rất mạnh mẽ, nó được bao gồm nhân viên dịch vụ tiền mã hóa vỏ ứng dụng + tài sản tĩnh (prod), script (async chunk) tải trước bằng cách sử dụng , bảng kê khai ứng dụng web + favicons, chế độ xem meta thân thiện với thiết bị di động và điểm hải đăng là 90 + / 100. Nhưng nó không đi kèm với các thành phần tích hợp, vì vậy trong bài viết này tôi sẽ đề xuất một số thành phần di động để tăng tốc độ phát triển giao diện người dùng của bạn trong các ứng dụng web tiến bộ của vuejs. Tại đây, danh sách các thành phần di động để tạo PWA trong vuejs.

  1. Vuetify

Vuetify.js là một khung thành phần ngữ nghĩa cho Vue.js 2. Nó nhằm mục đích cung cấp các thành phần sạch, ngữ nghĩa và có thể tái sử dụng, giúp xây dựng ứng dụng của bạn dễ dàng. Vuetify.js sử dụng mẫu thiết kế Thiết kế Vật liệu của Google, lấy tín hiệu từ các khung phổ biến khác như Materialize.css, Material Design Lite, Semantic UI và Bootstrap 4. Vuetify.js đi kèm với tài liệu tốt và thành phần hỗ trợ đầy đủ, nó rất dễ học.

2. Giao diện người dùng Mint

Dựa trên phong cách iOS, UI bạc hà có trọng lượng khá nhẹ. Khi tất cả được nhập, mã nén chỉ chiếm không gian gzip ~ 30kb (JS + CSS). Mint UI đi kèm với kích thước nhỏ và thành phần hỗ trợ đầy đủ, nhưng tài liệu này rất khó hiểu, vì nó quá đơn giản và một số tài liệu đã bị cắt. Cuối cùng, mặc dù mint UI có hỗ trợ ngôn ngữ tiếng Anh trong tài liệu, nhưng trong ví dụ trực tiếp vẫn sử dụng ngôn ngữ Trung Quốc, thật tệ.

3. Nguyên liệu

Vue Material là khung nhẹ được xây dựng chính xác theo thông số kỹ thuật của Thiết kế Vật liệu. Xây dựng các ứng dụng web mạnh mẽ và được thiết kế tốt có thể phù hợp trên mọi màn hình. Vật liệu Vue có sự tương đồng với các thành phần vật liệu góc, nếu bạn đã từng sử dụng vật liệu góc bạn có thể dễ dàng chuyển đổi.

4. Giao diện người dùng sắc sảo

Keen UI được thiết kế để trở thành thư viện UI Vue.js nhẹ với API đơn giản. Giao diện người dùng Keen được lấy cảm hứng từ Thiết kế Vật liệu Google Google, nhưng Giao diện người dùng Keen không phải là khung CSS và do đó, bạn đã giành chiến thắng để tìm một hệ thống lưới hoặc kiểu cho kiểu chữ trong đó. Thay vào đó, trọng tâm là tạo ra các thành phần có thể tái sử dụng có tính tương tác.

5. Vum

Vum là bản dựng UI Framework với Vue.js cho ứng dụng web di động. Vum có tính năng, cấu trúc trang đầy đủ (tiêu đề, nội dung, chân trang), một loạt các thành phần mạnh mẽ, dễ sử dụng và mở rộng và hoạt hình CSS3 hiệu suất cao. Vum là thiết kế iOS dựa trên giao diện người dùng, nhưng vum có ít thành phần hơn so với giao diện người dùng.

Kết luận, Vuetify là thành phần đầy đủ và mạnh mẽ nhất cho các ứng dụng vuejs, đi kèm với tài liệu tốt và cuối cùng nó cũng tích hợp với NUXT để xây dựng dự án kết xuất phía máy chủ. Vì vậy, tôi sẽ đặt vuetify làm ưu tiên hàng đầu của mình. Nhưng, nếu bạn muốn chọn sự đơn giản, bạn nên xem xét Mint UI hoặc Keen UI là lựa chọn của bạn. Nếu bạn thích thiết kế dựa trên Android, bạn có thể chọn Vuetify và nếu bạn thích sử dụng thiết kế dựa trên iOS, bạn nên truy cập Mint UI.