GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 23/02/2017 | 00:00 GMT+7

Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017

Bất kỳ thư viện kết xuất chế độ xem tốt nào cũng nên có nhiều thành phần của bên thứ ba để các nhà phát triển làm việc. Vue cũng không ngoại lệ. Nó có rất nhiều thư viện thành phần tuyệt vời để bạn sử dụng trong bất kỳ dự án nào bạn thấy phù hợp.

Cập nhật lần cuối vào ngày 27 tháng 11 năm 2017.

Trong năm qua, số lượng thư viện thành phần phù hợp với máy tính để bàn / web và khuôn khổ cho Vue.js đã bùng nổ, nghĩa là đã đến lúc cập nhật cho bài viết này. Ở đây, tôi sẽ thử và đưa ra một bản tóm tắt các tính năng và số liệu thống kê khác nhau cho từng thư viện để giúp bạn đưa ra quyết định sáng suốt cho dự án tiếp theo của bạn .

Vì mục đích ngắn gọn và tránh tình trạng tê liệt lựa chọn, tôi sẽ tích cực loại trừ các thư viện có thể rộng rãi, nhưng có vẻ được bảo trì kém hoặc thiếu tài liệu đầy đủ.

Phần lớn các bộ sưu tập thành phần này tuân theo các nguyên tắc thiết kế Material hoặc Ant , mặc dù có một số ngoại lệ. Vì lý do đó, tôi sẽ chia chúng thành các danh mục dựa trên ngôn ngữ thiết kế.

Danh mục thành phần

Các danh mục thành phần sẽ được sử dụng để cho biết thư viện có những thành phần nào mà không cần phải liệt kê từng thành phần. Dưới đây là danh sách các loại có thể. Nếu một thư viện không có phần lớn các thành phần được chỉ định trong mỗi danh mục, thì danh mục đó sẽ không được biểu thị như hiện tại.

  • Đầu vào : Các nút, Trường nhập, Hộp kiểm, v.v.
  • Đầu vào nâng cao : Người chọn ngày , Tự động điền, Trình tải file lên
  • Các chỉ số : Huy hiệu, Chỉ báo tiến độ, Bánh mì nướng, Đồ ăn nhanh
  • Điều hướng : Menu, Tab, v.v.
  • Hộp thoại : Hộp thoại, Phương thức, Cửa sổ bật lên
  • Bố cục : Bảng bên, Danh sách, Thẻ, Lưới, Kiểu chữ

Vật liệu thiết kế

Nhiều người đã quen thuộc với Material Design, ngôn ngữ thiết kế được tạo ra bởi Google kết hợp phong cách phẳng với ánh sáng và bóng tối thực tế để tạo ra một giao diện quen thuộc. Vue có sẵn nhiều thư viện để triển khai Material Design.

Vật liệu Vue

Vue Material là một thư viện mạnh mẽ với một số lượng đáng kể các thành phần bao gồm gần như toàn bộ thông số của Material Design. Nó tuân theo đặc điểm kỹ thuật càng chặt chẽ càng tốt và do đó, các thành phần gần như không thể phân biệt được với các triển khai root của Google. Tuy nhiên, chỉ mang tính giai thoại, nó có vẻ hơi chậm chạp.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 5.000 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 390KB
  • Nhà phát triển chính: Marcos Moura
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Trung bình
  • Tính chủ đề: Động, trong mã. Có thể được swap cho mỗi thành phần.
  • Mô-đun: Cao (khả năng nhập linh kiện trực tiếp với rung cây)
  • Độ chính xác thông số: Cao
  • Kho lưu trữ: https://github.com/vuematerial/vue-material

Kết luận (TL; DR) Sẽ là một lựa chọn tốt để phát triển toàn bộ ứng dụng của bạn với điều này. Các đầu vào nâng cao hơn, chẳng hạn như trình tải lên file hoặc hộp kết hợp tự động hoàn thành có thể yêu cầu các thành phần khác của bên thứ ba, nhưng đối với hầu hết mọi thứ khác, Vue Material sẽ giúp bạn.

Vuetify

Vuetify là một thư viện thành phần Material Design tuyệt vời khác. Nó được thiết kế từ đầu để đưa ứng dụng của bạn từ 0 đến production .Và như vậy, nó bao gồm tám mẫu CLI bao gồm mọi thứ từ trường hợp sử dụng đơn giản nhất đến các ví dụ đầy đủ về SSR, Electron, PWA và Nuxt.js. Trong khi, giống như Vue Material , nó tuân theo thông số của Material Design, nó còn đi xa hơn với các tùy chọn bổ sung và tùy chỉnh cho các thành phần để đáp ứng hầu hết mọi trường hợp sử dụng có thể. Vuetify cũng có một cộng đồng lớn đằng sau nó, và một số nhà tài trợ của công ty.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 7.000 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 463KB
  • Nhà phát triển chính: John Leider
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Cao
  • Chủ đề: Màu tùy chỉnh, Ghi đè thủ công
  • Mô-đun: Cao (Có thể nhập các thành phần riêng lẻ, nhưng nó phức tạp hơn một chút so với hy vọng.)
  • Độ chính xác thông số: Cao
  • Kho lưu trữ: https://github.com/vuetifyjs/vuetify

Kết luận (TL; DR) Vuetify có mọi thứ bạn cần và sau đó là một số. Bạn có thể sẽ không sai nếu bạn chọn nó. Nó dường như tạo ra khá nhiều lựa chọn cho bạn, nhưng mặt khác, nó khiến bạn có rất nhiều lựa chọn để làm việc.

Khung chuẩn tinh

Quasar Framework được thiết kế như một khuôn khổ chung, tất cả. Nó trước đây đã giành được một vị trí trong vòng tổng hợp Thành phần di động của ta , nhưng kể từ đó đã mở rộng khả năng để bao gồm các thành phần ứng dụng web và máy tính để bàn phổ biến. Nó thậm chí còn có CLI! Về cơ bản nó là một bồn rửa nhà bếp, với hầu hết mọi thứ bạn có thể nghĩ ra. Cùng với chủ đề Material Design nó cũng bao gồm một chủ đề iOS với nhiều hơn thế nữa. Khiếu nại duy nhất của tôi là các thành phần có chất lượng khá thấp, với việc sử dụng phông chữ và hoạt ảnh không nhất quán.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 4,200 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 463KB
  • Nhà phát triển chính: Razvan Stoenescu
  • Chất lượng tài liệu: Tuyệt vời!
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Trung bình
  • Khả năng chủ đề: Thay đổi màu sắc / Bút cảm ứng
  • Mô-đun: Thấp
  • Độ chính xác thông số: Thấp
  • Kho lưu trữ: https://github.com/quasarframework/quasar

Kết luận (TL; DR) Chuẩn tinh là tuyệt vời khi bạn muốn bao phủ nhiều nền tảng và thành phần nhất có thể với càng ít công việc tùy chỉnh càng tốt. Mặc dù nó đang được cải thiện mọi lúc, nhưng tại thời điểm này, nó có vẻ hơi hướng tới các nguyên mẫu hơn là các ứng dụng thương mại chính thức.

Keen UI

Keen UI cung cấp một tập hợp đáng kể các thành phần theo phong cách Material-Design. Nó không hoàn toàn tuân theo thông số kỹ thuật trực tiếp, thường chọn các thành phần nhẹ hơn và chuyển đổi nhanh hơn, nhưng kết quả là, nó có cảm giác nhanh hơn một số thư viện nặng hơn ở đây. Nó không bao gồm nhiều thứ khác ngoài các thành phần. Không có bố cục hoặc hệ thống kiểu chữ. Tùy thuộc vào mục tiêu của bạn là gì, đây có thể là điểm cộng hoặc điểm trừ. Do đó, nó nhẹ hơn một chút so với một số tùy chọn đã đề cập trước đây.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 3.000 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 284KB
  • Nhà phát triển chính: Josephus Paye II
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại
  • Ảnh động: Trung bình
  • Themeability: SASS Themeing, cấu hình global
  • Mô-đun: Cao (khả năng nhập linh kiện trực tiếp với rung cây)
  • Độ chính xác thông số: Trung bình
  • Kho lưu trữ: https://github.com/JosephusPaye/Keen-UI

Kết luận (TL; DR) Một lựa chọn tốt nếu bạn cần nhiều thành phần khác nhau nhưng đang tự xử lý mọi thứ khác (chẳng hạn như bố cục, kiểu chữ và công cụ).Cũng có vẻ hơi thiếu trong bộ phận biểu diễn.

Đề cập đặc biệt

  • Thật không may, Muse-UI không lọt vào danh sách này do tài liệu tiếng Anh hơi khó hiểu. Điều đó nói rằng, nó có một lượng người theo dõi khá đáng kể ở Trung Quốc và cảm thấy nhanh hơn nhiều so với Vue Material và Vuetify .

Kiến thiết kế

Kiến thiết kế là một ngôn ngữ thiết kế phổ biến ở Trung Quốc. Nó được tạo ra bởi Alibaba, một trong những công ty thương mại điện tử lớn nhất trên thế giới. Ant Design ủng hộ khoảng cách và dấu hiệu quen thuộc với các yếu tố giao diện thân thiện, hơi tròn. Nếu bạn đã từng sử dụng các ứng dụng Trung Quốc, trên điện thoại hay máy tính để bàn, có lẽ bạn sẽ nhận thấy tất cả chúng đều có cảm giác thân thiện và quen thuộc, chọn lề nhỏ hơn và màu sáng-trên-trắng. Đó là cảm giác mà Ant Design dự định truyền tải.

Vì Alibaba sử dụng Vue cho nhiều mục đích phát triển, không có gì ngạc nhiên khi có rất nhiều thư viện giao diện user Ant Design.

Thành phần

Bạn thực sự không thể viết một tập hợp các bộ công cụ thành phần Vue mà không bao gồm Giao diện user phần tử. Đây là một trong những thư viện UI lâu đời nhất và được biết đến nhiều nhất dành cho Vue, và từ đó đã được chuyển sang React và Angular. Những người ở Eleme gần đây đã phát hành version 2.0 của Element UI bao gồm một chủ đề mới, cải thiện khả năng truy cập, hỗ trợ Typecript, các biểu tượng mới cũng như một loạt các thành phần và tùy chọn mới.

Nó không trực tiếp theo dõi Ant Design, nhưng mượn khá nhiều tín hiệu từ nó.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 20.200 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) ??? (Linh hoạt.)
  • Nhà phát triển chính: Eleme
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu:中文 (tiếng Trung), tiếng Anh, tiếng Tây Ban Nha (sắp ra mắt)
  • Ngôn ngữ cộng đồng chính:中文 (Trung Quốc) (Tiếng Anh là thứ hai gần nhất và các vấn đề bằng tiếng Trung được tự động dịch sang tiếng Anh thông qua. Một bot.)
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Trung bình
  • Chủ đề: Thay đổi màu sắc, chủ đề SCSS.
  • Mô-đun: Cao (Chỉ sử dụng những gì bạn cần theo mặc định.)
  • Độ chính xác thông số: Thấp
  • Kho lưu trữ: https://github.com/ElemeFE/element

Kết luận (TL; DR) Yếu tố có một chút tác động nặng nề. Nó có mọi thứ bạn có thể cần và hơn thế nữa. Một số quy ước hơi kỳ quặc, nhưng nếu không thì nó hoạt động tốt trong hầu hết các trường hợp sử dụng. Chất lượng của các thành phần và khả năng của Element là khó có thể đánh bại và nó vô cùng thuận tiện cho mọi thứ, từ các dự án nhanh chóng cho đến các trang web và ứng dụng quy mô lớn.

tôi xem

Giống như Element, iView chứa một số lượng lớn các thành phần gần như tuân theo ngôn ngữ thiết kế Ant. Nó cũng có một vài công cụ cộng đồng để xử lý chủ đề và một trình tải webpack tùy chỉnh. Nó hiện đang được phát triển tích cực. Mối quan tâm duy nhất của tôi là nó đôi khi có những đột biến kỳ lạ về hiệu suất kém.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 11.100 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 656KB
  • Nhà phát triển chính: Alipay & Aresn
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu:中文 (tiếng Trung), tiếng Anh
  • Ngôn ngữ cộng đồng chính:中文 (Trung Quốc) (Tiếng Anh là thứ hai gần nhất và các vấn đề bằng tiếng Trung được tự động dịch sang tiếng Anh qua.một con bot.)
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Trung bình
  • Chủ đề: LESS / biến
  • Mô-đun: Cao (khả năng nhập linh kiện trực tiếp với rung cây)
  • Độ chính xác thông số: Thấp
  • Kho lưu trữ: https://github.com/iview/iview

Kết luận (TL; DR) iView là một đối thủ xứng tầm với Element với một số lượng lớn các thành phần chất lượng cao có sẵn. Tuy nhiên, kết quả là nó bị ảnh hưởng bởi bộ phận cân nặng.

Đề cập đặc biệt

  • AT-UI trông giống như một khởi đầu tuyệt vời cho một thư viện Ant Design khác, với tài liệu tốt và một số khác biệt nhỏ về phong cách làm cho các thành phần của nó nổi bật hơn so với gói. Thật không may, nó vẫn còn khá sớm và số lượng các thành phần có hạn. Xem không gian này.
  • fish-ui có một phong cách gọn gàng, không rườm rà với một số thành phần đã có sẵn. Tuy nhiên, tài liệu có chất lượng hơi thấp và phần lớn thiếu giải thích.

Khác

Có một vài bộ sưu tập thành phần không phù hợp với các danh mục trên, nhưng cũng rất đáng xem.

Buefy

Được xây dựng dựa trên Bulma , Buefy cố gắng tránh xa bạn nhiều nhất có thể, chỉ cung cấp logic cần thiết để làm việc với các kiểu Bulma. Do đó, nó khá nhẹ nhưng trông vẫn tuyệt vời. Nó không bao gồm tất cả các thành phần mà các khung công tác khác làm, nhưng nó có hầu hết các thành phần phổ biến.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 1.600 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 385KB
  • Nhà phát triển chính: Rafael Beraldo
  • Chất lượng tài liệu: Tốt
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Đầu vào nâng cao, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Thấp
  • Chủ đề: SASS / biến
  • Mô-đun: Thấp
  • Kho lưu trữ: https://github.com/rafaelpimpa/buefy

Kết luận (TL; DR) Buefy rất phù hợp khi bạn cần một số thành phần giao diện user linh hoạt và thú vị cho trang web của bạn . Có lẽ không phải là lựa chọn tuyệt vời cho các ứng dụng web khó tính.

BootstrapVue

Bootstrap đáng kính đã trở lại với version 4 và trông bóng bẩy hơn bao giờ hết. Cộng đồng Vue, không bao giờ bị bỏ lại phía sau, đã đáp lại bằng BootstrapVue , một thư viện thay thế các phần jQuery của Bootstrap 4 bằng các thành phần Vue thích hợp và cũng bổ sung thêm rất nhiều bit hữu ích khác. BootstrapVue bao gồm rất nhiều thứ trong bộ phận bố cục, mặc dù người ta có thể thấy nó thiếu một chút khi nói đến các đầu vào nâng cao hơn, hướng đến việc sử dụng máy tính để bàn hơn là thiết bị di động.

Chạy xuống

  • Tích cực phát triển: Có
  • Mức độ phổ biến: ~ 3.000 sao
  • Giấy phép: MIT
  • Kích thước: (pre-gzip) 315KB (188KB + Bootstrap 4 CSS)
  • Nhà phát triển chính: Pooya Parsa & Troy Morehouse
  • Chất lượng tài liệu: Kỹ
  • Ngôn ngữ tài liệu: Tiếng Anh
  • Ngôn ngữ cộng đồng chính: tiếng Anh
  • Thành phần: Đầu vào, Chỉ báo, Điều hướng, Hộp thoại, Bố cục
  • Ảnh động: Thấp
  • Khả năng chủ đề: SASS / Bootstrap 4
  • Tính module : Cao (Mọi thành phần có thể được nhập trực tiếp hoặc dưới dạng plugin chứa các thành phần liên quan.)
  • Kho lưu trữ: https://github.com/bootstrap-vue/bootstrap-vue

Kết luận (TL; DR) Nếu bạn thích Bootstrap, có thể bạn sẽ thích BootstrapVue. Nó tuyệt vời cho các trang web sẽ được sử dụng chủ yếu trên máy tính để bàn và / hoặc hệ thống có bàn phím.Số dặm của bạn trên thiết bị di động hoặc các ứng dụng nâng cao hơn có thể khác nhau. BootStrapVue cũng hoạt động tốt hơn nhiều trong bộ phận trợ năng so với hầu hết các bộ công cụ khác ở đây.

Nếu có bất kỳ điều gì bạn cho là còn thiếu hoặc cần được bổ sung, hoặc muốn thông báo cho ta về lựa chọn thư viện thành phần của bạn, ta rất mong nhận được phản hồi từ bạn .

Tags:

Các tin liên quan

Cách cài đặt Django Web Framework trên Debian 8
2016-12-21
Cách triển khai ứng dụng web Falcon với Gunicorn và Nginx trên Ubuntu 16.04
2016-11-16
Giới thiệu về Ứng dụng web tiến bộ (PWA): Service Worker & Manifest
2016-11-10
Cách cài đặt Django Web Framework trên Ubuntu 16.04
2016-05-16
Cách triển khai ứng dụng web Clojure trên FreeBSD 10.2
2015-12-22
Cách triển khai ứng dụng web Clojure trên Ubuntu 14.04
2015-11-20
Cách thiết lập web server khả dụng cao với IP giữ và nổi trên Ubuntu 14.04
2015-10-20
Xây dựng cho Sản xuất: Ứng dụng Web - Tổng quan
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - Giám sát
2015-06-01
Xây dựng cho Sản xuất: Ứng dụng Web - backup
2015-06-01