Giới thiệu

Laravel vue element-ui Build Status license GitHub release GitHub stars

Laravue là giao diện quản trị được phát triển trên nền tảng Laravel, sử dụng thư viện vue-element-admin và nhiều tính năng tích hợp sẵn. Với sự hỗ trợ mạnh từ Laravel, Laravue là một giải pháp toàn diện cho một ứng dụng quản trị doanh nghiệp.

TIP

Laravue được xây dựng cho một giải pháp toàn diện, vì vậy Laravue nên được sử dụng từ khi bắt đầu dự án bằng cách tạo ra các layout đơn giản từ đầu và phát triển từ từ các tính năng phù hợp với yêu cầu hệ thống. Điều này sẽ tránh làm cho source code bị dư thừa vì Laravue có rất nhiều các tính năng mà doanh nghiệp của bạn chưa hoặc không dùng đến.


Chức năng chính

- Login / Logout

- ACL - Quản lý quyền truy cập
  - Quản lý người dùng
  - Quản lý nhóm và quyền hạn theo nhóm
  - Hỗ trợ directives cho quyền và nhóm (v-permission/v-role)

- Tính năng chung
  - I18n (đa ngôn ngữ)
  - Sidebar linh hoạt theo quyền hạn người dùng
  - Breadcrumb động
  - Lịch sử truy cập (sử dụng Tags-view), hỗ trở right-click
  - Svg Sprite
  - Responsive layout

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Export/Upload Excel
  - Export zip
  - Visualization Excel

- Bảng dữ liệu
  - Bảng dữ liệu động
  - Bảng dữ liệu hỗ trợ kéo thả
  - Bảng dữ liệu dạng cây
  - Bảng dữ liệu hỗ trợ chỉnh sửa trực tiếp (inline-editing)

- Trang thông báo lỗi
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - SplitPane
  - Dropzone
  - Sticky
  - BackToTop button
  - CountTo
  - Kanban board
  - Draggable list
  - Draggable popup dialog
  - And more... (https://laravue.dev/#/dashboard)

- Các ví dụ tham khảo
- Dashboard
- Guide Page
- Biểu đồ (ECharts)
- Clipboard
- Layout elements (Form, Tab, Icons...)

Yêu cầu hệ thống

Để chạy được Laravue, máy của bạn phải chạy được Laravel mới nhất Node.js. Ngoài ra, bạn cũng phải biết về Gitcomposer.

Bên cạnh đó, Laravue sử dụng ES2015+, vue, vuex, vue-router, axios and element-ui. Nếu bạn đã có sẵn kiến thức cơ bản về những thư viện này, nó sẽ giúp cho các bạn tiếp cận Laravue dễ dàng hơn.

TIP

Laravue không hỗ trợ cho các trình duyệt cũ như IE 8... Bạn có thể thêm polyfills trong trường hợp cần thiết.

Cấu trúc của dự án

Laravue được tổ chức theo phân cấp thư mục như bên dưới: (Laravel cơ bản và resources cho VueJS/ElementUI)

├── app                        // Laravel app folder
├── boostrap                   // Laravel boostrap folder
├── config                     // Laravel boostrap
│   └── laravue.php            // Configuration file for Laravue project
├── database                   // Laravel database folder
├── public                     // Laravel public folder
│   ├── fonts
│   │   └── vendor             // Vendor fonts (element-ui...)
│   └── static                 // Configuration file for Laravue project
│       └── Tinymce            // rich text editor
├── resources                  // Laravel resources
│   ├── js                     // Main laravue source code
│   │   ├── api                // api service
│   │   ├── assets             // module assets like fonts,images (processed by webpack)
│   │   ├── components         // global components
│   │   ├── directive          // global directive
│   │   ├── filters            // global filter
│   │   ├── icons              // svg icons
│   │   ├── lang               // i18nlanguage
│   │   ├── router             // router
│   │   ├── store              // store
│   │   ├── styles             // global css
│   │   ├── utils              // global utils
│   │   ├── vendor             // vendor libraries (excels...)
│   │   ├── views              // views
│   │   ├── App.vue            // main app component
│   │   ├── app.js             // app entry file
│   │   └── permission.js      // permission authentication
│   └── views                  // Laravel blade templates
│       └── laravue.blade.php  // Main view for Laravue application
├── .babelrc                   // babel config
├── .eslintrc.js               // eslint config
├── .gitignore                 // sensible defaults for gitignore
└── package.json               // package.json

Bắt đầu

# Clone the project with composer
composer create-project tuandm/laravue
cd laravue

# Migration and DB seeder (after changing your DB settings in .env)
php artisan migrate --seed

# Generate JWT secret key
php artisan jwt:secret

# install dependency
yarn install

# Build for development
yarn run dev # or yarn run watch

# Start local development server
php artisan serve

Bạn đã có thể dùng trình duyệt mở Laravue ở http://localhost:8000 (hoặc tại port mà câu lệnh php artisan serve trả về). Sau khi đăng nhập với email và mật khẩu có sẵn, bạn sẽ nhìn thấy toàn bộ ứng dụng.

Trang đăng nhập:

Laravue đã cài đặt sẵn các components tiêu chuẩn, quản lý state, đa ngôn ngữ, định tuyến (https://router.vuejs.org/),... Bạn có thể đọc thêm về các components đó ở tài liệu chi tiết.


TIP

Đề nghị: Bạn nên sử dụng laravue-core package nếu bạn muốn đem Laravue vào trong các dự án Laravel có sẵn, và Laravue khi đó sẽ trở thành tài liệu rất hữu ích.

Build for production

yarn run production

Thay đổi đường dẫn

Bạn có thể thay đổi đường dẫn cho Laravue dashboard bằng cách khai báo trong .env, ví dụ LARAVUE_PATH=admin. Nếu LARAVUE_PATH để trống, Laravue sẽ hiện thị tại trang chủ, nếu LARAVUE_PATH có giá trị, thì trang landing page mặc định của Laravel sẽ xuất hiện với đường dẫn vào Laravue dashboard

Landing page

WARNING

Changing .env requires running yarn run ... again to be affected.

Kiểm tra kích thước build files

Nếu bạn cảm thấy ứng dụng quá nặng (vendor.js, app.js quá lớn), bạn có thể kiểm tra lại bằng webpack-bundle-analyzer để optimize.

yarn run report

Sau khi chạy command ở trên, trình duyệt sẽ tự động mở lên ở địa chỉ http://127.0.0.1:8888 và hiện report về kích thước các module js đang sử dụng.

Với bảng demo hiện tại, kích thước file js sau khi minifying:

      /css/app.css   215 KiB       0  [emitted]         /js/app
        /js/app.js   2.9 MiB       0  [emitted]  [big]  /js/app
   /js/manifest.js  1.46 KiB       1  [emitted]         /js/manifest
     /js/vendor.js  4.17 MiB       2  [emitted]  [big]  /js/vendor

Và sau khi "nén" với nginx:

Đóng góp và cộng đồng

Tài liệu này được open-source tại laravue-doc dựa trên vuepress.

Laravue vẫn đang được phát triển để cung cấp nhiều tình năng hay, tích hợp các package Laravel chất lượng và hữu ích, đồng thời áp dụng các chuẩn mực tốt nhất trong lập trình để phát triển một giải pháp toàn diện cho doanh nghiệp. Chúng tôi mong đợi sẽ có nhiều đóng góp từ cộng đồng để dự án ngày một hoàn thiện hơn. Mọi ý kiến đóng góp xin gởi về email [bacduong@gmail.com] hoặc tạo trực tiếp tại github issues.

TIP

Chúng tôi mong muốn Laravue không chỉ là một giải pháp cho quản trị doanh nghiệp, mà còn là nơi hướng dẫn mọi người lập trình với Laravel/VueJS qua các ví dụ trực quan nhằm hỗ trợ cộng đồng lập trình viên Laravel

Trình duyệt

Các trình duyệt hiện đại và Internet Explorer 10+.

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

Lưu ý

Lưu ý

Chúng tôi cố gắng tránh dịch các thuật ngữ chuyên ngành tiếng anh để bảo đảm sự trong sáng của tài liệu (ví dụ responsive layout hay component...), vì vậy rất mong các bạn thông cảm và cùng tìm hiểu thêm ý nghĩa của các thuật ngữ - điều này sẽ giúp cho các bạn rất nhiều trong quá trình tiếp cận thuật ngữ chuyên ngành.