# Giới thiệu

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.

# 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ề Git và composer.

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.

# 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

# install dependency
npm install

# Build for development
npm run dev # or npm 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.

# Build for production

npm 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

# 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.

npm 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:

# Docker

docker-compose up -d

Chạy database migration/seeding:

# Get laravel docker container ID from containers list
docker ps

docker exec -it <container ID> php artisan migrate --seed 
# Where <container ID> is the "laravel" container name, ex: docker_laravel_1

Bạn cũng có thể chạy các lệnh npm bằng cách trên:

docker exec -it <container ID> npm run watch 
# Where <container ID> is the "laravel" container name, ex: src_laravel_1
...

Port mặc định cho docker là 8000 (http://localhost:8000). Hãy chắc chắn rằng không có ứng dụng nào đang chiếm port này, hoặc bạn có thể thay đổi nó ở https://github.com/tuandm/laravue/blob/master/docker-compose.yml

# Đó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.

# Trình duyệt

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

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	hai phiên bản gần nhất	hai phiên bản gần nhất	hai phiên bản gần nhất

# Lưu ý