vue-element-admin: Mẫu Bảng Điều Khiển Quản Trị Vue

vue-element-admin Là Gì?

vue-element-admin là một mẫu front-end để xây dựng bảng điều khiển quản trị và ứng dụng quản trị nội bộ, dựng trên Vue và thư viện component Element UI. README mô tả đây là điểm khởi đầu sẵn sàng cho production, có định tuyến theo phân quyền, các kịch bản build cho nhiều môi trường, cùng trình soạn thảo và công cụ Excel tích hợp sẵn, với mọi request trong bản demo đều được phục vụ bởi Mock.js thay vì một backend thật.

Tính Năng Cốt Lõi Cho Bảng Điều Khiển Quản Trị

• ✓Hệ thống phân quyền với kiểm tra ở cấp trang và cấp directive, một trang cấu hình phân quyền riêng, và đăng nhập hai bước, theo danh sách tính năng của README.
• ✓Các kịch bản build cho nhiều môi trường: dev, sit, stage, và prod.
• ✓Ba trình soạn thảo tích hợp sẵn: rich text, Markdown, và JSON, cùng tính năng chuyển Markdown sang HTML, nên các màn hình nội dung không cần tích hợp trình soạn thảo riêng.
• ✓Công cụ Excel để export, upload, xem trước trực quan, và export dạng zip, đều nằm trong danh sách tính năng có sẵn.
• ✓Sidebar động hỗ trợ định tuyến nhiều cấp, breadcrumb động, tab tags-view có thao tác chuột phải, và nhiều theme có thể chuyển đổi.
• ✓Trang Dashboard và Guide Page có sẵn ECharts, tiện ích Clipboard, ghi nhận Error Log, cùng các trang lỗi 401/404.
• ✓Mọi request trong mẫu này đều chạy qua Mock.js, nên bản demo và các tính năng hoạt động được trước khi có backend thật.

Ai Được Lợi Từ Mẫu Này?

• •Dựng nhanh một ứng dụng quản trị nội bộ trên Vue và Element UI khi bạn muốn có sẵn phân quyền, trình soạn thảo, và công cụ Excel thay vì tự xây từng phần.
• •Nghiên cứu cách một ứng dụng Vue thật tổ chức định tuyến theo phân quyền, sidebar động, và cấu hình build cho nhiều môi trường.
• •Dựng thử một giao diện quản trị trước khi có backend, vì mọi request trong mẫu này đều chạy qua Mock.js.
• •So sánh với điểm khởi đầu nhẹ hơn của chính dự án, vue-admin-template, nếu bộ tính năng đầy đủ này nhiều hơn mức bạn cần.

Bắt Đầu Với vue-element-admin

Clone repository, sau đó chạy `npm install` rồi `npm run dev` bên trong thư mục đó; README nói lệnh này sẽ tự mở dev server tại http://localhost:9527. Build cho môi trường staging và production dùng hai lệnh riêng, `npm run build:stage` và `npm run build:prod`, còn `npm run lint` (hoặc `npm run lint -- --fix`) kiểm tra định dạng code. README yêu cầu cài Node và Git trước, và trỏ tới một trang tài liệu riêng cho những gì nằm ngoài các lệnh này. Bản hiện tại, v4.0+, được xây trên vue-cli; bản cũ hơn, không dùng vue-cli, nằm ở branch tag/3.11.0.

Các Mẫu Quản Trị Liên Quan

Câu Hỏi Thường Gặp

Vấn đề vue-element-admin giải quyết

Các nhóm xây dựng bảng điều khiển quản trị nội bộ bằng Vue thường phải tự lắp cùng một hạ tầng nhiều lần: kiểm tra phân quyền ở cấp trang và cấp directive, cấu hình build riêng cho từng môi trường, và tích hợp trình soạn thảo cùng Excel từng cái một. vue-element-admin đóng gói sẵn hạ tầng đó (định tuyến theo phân quyền, kịch bản build cho dev/sit/stage/prod, cùng các trình soạn thảo rich text, Markdown, JSON và tính năng import/export Excel đã tích hợp sẵn), giúp một bảng điều khiển Vue và Element UI bắt đầu ở trạng thái gần như đã xây xong thay vì từ một router trống.

Ai nên dùng — và ai nên bỏ qua

Hãy thử vue-element-admin nếu bạn đang xây một trang quản trị nội bộ trên Vue và Element UI, và muốn có sẵn phân quyền, công cụ Excel, và trình soạn thảo để bạn tập trung tuỳ biến màn hình thay vì lắp ráp hạ tầng. Bỏ qua nếu bạn cần một điểm khởi đầu Vue tối giản, vì chính README của dự án đã khuyên dùng vue-admin-template cho việc đó, hoặc nếu stack của bạn không phải Vue và Element UI ngay từ đầu.

Repo liên quan