Element UI: thư viện component Vue 2.0
/element
Element UI là một thư viện component Vue 2.0 cung cấp đầy đủ form, table, dialog và các component điều hướng, được style sẵn và dùng được ngay trong app Vue. Nếu bạn đang mắc kẹt với Vue 2 và muốn một bộ component đầy đủ mà không phải tự viết dropdown hay date picker, đây là lựa chọn hợp lý. Nếu bắt đầu dự án Vue 3 mới, hãy bỏ qua — README khuyên chuyển sang Element Plus.
Thư viện Component Vue 2.0 cho Web
Element UI là một UI toolkit Vue.js 2.0 cho web, do đội ElemeFE xây dựng, bao gồm các component form, table, dialog, điều hướng và layout để dựng giao diện ứng dụng. Nó được cài qua npm và đăng ký toàn cục bằng Vue.use(Element), hoặc bạn có thể import từng component riêng để giảm bundle size. Tài liệu có bằng tiếng Anh, Trung, Tây Ban Nha và Pháp.
Các nhóm Component chính
- ✓Các component form — input, select, checkbox, radio, date picker — có sẵn hook validation
- ✓Component Table hỗ trợ sort, cùng các layout primitive (Container, Row, Col) để dựng trang kiểu dashboard
- ✓Các component overlay và feedback — Dialog, Message, Notification — dùng cho modal, alert và toast
- ✓Các component điều hướng — Menu, Tabs, Breadcrumb, Pagination — để dựng khung giao diện và luồng nhiều trang
- ✓Hệ thống theming kèm công cụ xem trước/tạo theme online (theme-chalk-preview) để tùy chỉnh giao diện trước khi deploy
- ✓Tài liệu FAQ đi kèm và danh sách awesome-element gồm các resource cộng đồng để mở rộng bộ component gốc
Bạn có thể xây dựng gì
- •Admin panel nội bộ và dashboard back-office cần table, form và modal dựng nhanh
- •Giao diện SaaS chạy Vue 2 cần các component form và nhập liệu nhất quán mà không phải tự build từng cái
- •Prototype và MVP nhanh, khi tự viết date picker và validation sẽ tốn quá nhiều thời gian
Cài đặt Element UI
Cài Element UI như một package npm: `npm install element-ui -S`. Đây là cách cài duy nhất được tài liệu hóa trong README — không có CLI riêng, công cụ scaffold, hay đoạn CDN nào được nhắc tới.
Import và sử dụng Component
Import Vue và Element UI, sau đó gọi `Vue.use(Element)` để đăng ký toàn bộ component cùng lúc — chỉ ba dòng code là dùng được cả bộ. Nếu bundle size quan trọng hơn sự tiện lợi, hãy import riêng từng component, ví dụ `import { Select, Button } from 'element-ui'`, rồi đăng ký từng cái bằng `Vue.component(Select.name, Select)`. README có dẫn tới hướng dẫn Quick Start đầy đủ hơn trên trang docs.
Điểm mạnh
- ✓Chỉ một lệnh npm install là có cả bộ component — form, table, dialog — thay vì phải ghép năm thư viện nhỏ lẻ
- ✓Import theo nhu cầu (`import { Select, Button } from 'element-ui'`) cho phép chỉ đăng ký những component thực sự dùng thay vì cả thư viện
- ✓Công cụ xem trước/tạo theme online giúp việc đổi giao diện bớt mò mẫm hơn so với sửa biến Sass mù quáng
- ✓Tài liệu và cộng đồng hỗ trợ bằng bốn ngôn ngữ — Anh, Trung, Tây Ban Nha, Pháp — kể cả hướng dẫn contributing đã dịch
Chỉ hỗ trợ Vue 2 — Không hỗ trợ Vue 3
- △Chỉ hỗ trợ Vue 2 — README nói rõ Element sẽ ở lại Vue 2.x và hướng người dùng Vue 3 sang Element Plus, nghĩa là không có đường nâng cấp trong chính repo này
- △Người dùng MiniProgram bị hướng sang một dự án khác, MorJS, thay vì được hỗ trợ trực tiếp ở đây
- △Bản port cho React và Angular (element-react, element-angular) nằm ở repo riêng với tình trạng bảo trì riêng, không nằm trong phạm vi review này
- △Hỗ trợ trình duyệt chỉ tới IE10+ theo README — dấu hiệu cho thấy codebase này có từ trước thời chỉ nhắm trình duyệt hiện đại
Element UI so với Element Plus và các lựa chọn khác
Câu hỏi thường gặp
Element UI phát hành theo giấy phép MIT, cho phép dùng thương mại, chỉnh sửa và phân phối lại mà không phải trả phí bản quyền.
Element UI chỉ hỗ trợ Vue 2 — README nói dự án sẽ ở lại Vue 2.x và hướng các dự án Vue 3 sang Element Plus, một thư viện do cộng đồng phát triển riêng.
Element UI có hướng dẫn custom-theme trong tài liệu, cùng công cụ xem trước và tạo theme online (theme-chalk-preview) để chỉnh giao diện trước khi áp dụng vào project.
Element UI nhắm tới Vue 2 và do chính đội ElemeFE bảo trì, còn Element Plus là thư viện riêng do cộng đồng phát triển cho Vue 3 — README khuyên chuyển sang Element Plus với dự án Vue 3 mới.
Import trực tiếp component cần dùng, ví dụ `import { Select, Button } from 'element-ui'`, rồi đăng ký từng cái bằng `Vue.component(Select.name, Select)` thay vì gọi `Vue.use(Element)` cho cả thư viện.
Theo README, Element UI hỗ trợ các trình duyệt hiện đại và Internet Explorer từ bản 10 trở lên.
Vấn đề mà nó giải quyết
Các dự án Vue 2 cần một bộ component form, table, dialog nhất quán mà không phải mỗi team tự viết lại date picker và logic validation từ đầu. Element UI đóng gói toàn bộ phần đó — component, theming, tài liệu đa ngôn ngữ — vào một lệnh cài npm, điều này đặc biệt có ý nghĩa với những team đang mắc kẹt bảo trì app Vue 2 chưa hoặc không thể chuyển sang Vue 3.
Nên dùng khi nào — và nên bỏ qua khi nào
Chọn Element UI nếu bạn đang bảo trì hoặc mở rộng một codebase Vue 2 sẵn có và muốn một bộ component đầy đủ, nhất quán mà không phải ghép nhiều thư viện nhỏ lại với nhau. Bỏ qua nó với dự án Vue 3 mới toanh — README hướng thẳng các dự án Vue 3 sang Element Plus. Team cần hỗ trợ MiniProgram nên tìm đến MorJS thay vì Element UI.
Repo liên quan
element có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về element.