Ngày 14 tháng 2 năm 2022C Category: Laravel Category : Laravel Xin chào Dev, Bài viết này đi chi tiết về Laravel 9 Cài đặt Bootstrap 5. Hãy để thảo luận về Laravel 9 Bootstrap Auth Giàn giáo. Nếu bạn có một câu hỏi về việc cài đặt Bootstrap 5 trong Laravel 9 thì tôi sẽ đưa ra một ví dụ đơn giản với một giải pháp. Nếu bạn có một câu hỏi về giàn giáo xác thực Laravel 9 bằng cách sử dụng bootstrap thì tôi sẽ đưa ra một ví dụ đơn giản với một giải pháp. Thực hiện theo các bước hướng dẫn dưới đây về cách sử dụng bootstrap trong Laravel 9. Gói UI của Laravel Giver cho bước dễ dàng của giàn giáo auth. Laravel UI cung cấp các tính năng xác thực đơn giản bao gồm đăng nhập, đăng ký, đặt lại mật khẩu, xác minh email và xác nhận mật khẩu bằng Bootstrap, React và Vue. Trong hướng dẫn này, tôi sẽ cung cấp cho bạn các bước đơn giản về cách cài đặt Bootstrap 5 và cách tạo giàn giáo bằng cách sử dụng Bootstrap 5 trong phiên bản Laravel 9. Vì vậy, hãy làm theo các bước dưới đây:  Cài đặt Laravel 9 Trước hết, chúng ta cần có một ứng dụng phiên bản Laravel 9 mới bằng lệnh GHRAD, vì vậy hãy mở dấu nhắc thiết bị đầu cuối hoặc lệnh của bạn và chạy lệnh gầm gừ:
Cài đặt UI Laravel Chúng ta hãy chạy lệnh gầm để cài đặt gói UI Laravel bằng lệnh bellow:
Tiếp theo, bạn phải cài đặt lệnh Gói Gói UI Laravel để tạo giàn giáo Auth bằng Bootstrap 5. Vì vậy, hãy chạy lệnh Bellow:
Bây giờ chúng ta hãy chạy Lệnh Bellow để cài đặt NPM:
Nó sẽ tạo các tệp CSS và JS Min. Lệnh di chuyển chạy tiếp theo:
Chạy ứng dụng Laravel: Tất cả các bước cần thiết đã được thực hiện, bây giờ bạn phải nhập lệnh đã cho bên dưới và nhấn Enter để chạy ứng dụng Laravel:
Bây giờ, hãy truy cập trình duyệt web của bạn, nhập URL đã cho và xem đầu ra ứng dụng:
Bây giờ bạn có thể thấy bố cục dưới đây như ở đây: Trang chủ: Trang đăng nhập: Trang đăng ký: Trang bảng điều khiển: Bạn có thể sử dụng BootStrap 5 trong tệp lưỡi của mình như dưới đây:
Tôi hy vọng nó có thể giúp bạn... Phiên bản
Giàn giáo JavaScript & CSS
Giới thiệuMặc dù Laravel không ra lệnh cho các bộ xử lý trước JavaScript hoặc CSS mà bạn sử dụng, nhưng nó cung cấp một điểm bắt đầu cơ bản bằng cách sử dụng bootstrap, React và / hoặc Vue sẽ hữu ích cho nhiều ứng dụng. Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói frontend này. Giàn giáo Bootstrap và Vue do Laravel cung cấp nằm trong gói nhà soạn nhạc 9, có thể được cài đặt bằng trình soạn thảo: Khi gói 9 đã được cài đặt, bạn có thể cài đặt giàn giáo phía trước bằng lệnh 1 Artisan: CSSLaravel Mix cung cấp một API rõ ràng, biểu cảm trên việc biên dịch SAS hoặc ít hơn, là phần mở rộng của CSS đơn giản thêm các biến, mixin và các tính năng mạnh mẽ khác giúp làm việc với CSS thú vị hơn nhiều. Trong tài liệu này, chúng tôi sẽ thảo luận ngắn gọn về tổng hợp CSS nói chung; Tuy nhiên, bạn nên tham khảo tài liệu đầy đủ Laravel Mix để biết thêm thông tin về việc biên dịch SASS hoặc ít hơn. JavaScriptLaravel không yêu cầu bạn sử dụng một khung JavaScript hoặc thư viện cụ thể để xây dựng các ứng dụng của bạn. Trên thực tế, bạn không phải sử dụng JavaScript. Tuy nhiên, Laravel bao gồm một số giàn giáo cơ bản để giúp bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. Vue cung cấp một API biểu cảm để xây dựng các ứng dụng JavaScript mạnh mẽ bằng các thành phần. Cũng như CSS, chúng tôi có thể sử dụng Laravel Mix để dễ dàng biên dịch các thành phần JavaScript thành một tệp JavaScript sẵn sàng cho trình duyệt. Viết CSSSau khi cài đặt gói trình soạn thảo 9 và tạo giàn giáo phía trước, tệp 3 của Laravel sẽ bao gồm gói 4 để giúp bạn bắt đầu tạo mẫu cho ứng dụng của bạn bằng cách sử dụng bootstrap. Tuy nhiên, hãy thoải mái thêm hoặc xóa các gói khỏi tệp 3 khi cần thiết cho ứng dụng của riêng bạn. Bạn không bắt buộc phải sử dụng khung Bootstrap để xây dựng ứng dụng Laravel của mình - nó được cung cấp như một điểm khởi đầu tốt cho những người chọn sử dụng nó. Trước khi biên dịch CSS của bạn, hãy cài đặt các phụ thuộc frontend của dự án bằng Trình quản lý gói nút (NPM): 0 Khi các phụ thuộc đã được cài đặt bằng 6, bạn có thể biên dịch các tệp SASS của mình thành CSS đơn giản bằng cách sử dụng Laravel Mix. Lệnh 7 sẽ xử lý các hướng dẫn trong tệp 8 của bạn. Thông thường, CSS được biên dịch của bạn sẽ được đặt trong thư mục 9: 1 Tệp 8 được bao gồm trong giàn giáo phía trước của Laravel sẽ biên dịch tệp SASS 1. Tệp 2 này nhập một tệp các biến SASS và tải Bootstrap, cung cấp một điểm khởi đầu tốt cho hầu hết các ứng dụng. Vui lòng tùy chỉnh tệp 2 tuy nhiên bạn muốn hoặc thậm chí sử dụng bộ xử lý tiền hoàn toàn khác bằng cách định cấu hình Laravel Mix. Viết JavaScriptTất cả các phụ thuộc JavaScript theo yêu cầu của ứng dụng của bạn có thể được tìm thấy trong tệp 3 trong thư mục gốc của dự án. Tệp này tương tự như tệp 5 ngoại trừ nó chỉ định các phụ thuộc JavaScript thay vì phụ thuộc PHP. Bạn có thể cài đặt các phụ thuộc này bằng Trình quản lý gói nút (NPM): 0
Khi các gói được cài đặt, bạn có thể sử dụng lệnh 7 để biên dịch tài sản của mình. WebPack là một người đóng gói mô -đun cho các ứng dụng JavaScript hiện đại. Khi bạn chạy lệnh 7, webpack sẽ thực thi các hướng dẫn trong tệp 8 của bạn: 1 Theo mặc định, tệp Laravel 8 biên soạn SASS của bạn và tệp 4. Trong tệp 5, bạn có thể đăng ký các thành phần VUE của mình hoặc, nếu bạn thích một khung khác, hãy định cấu hình ứng dụng JavaScript của riêng bạn. JavaScript được biên dịch của bạn thường sẽ được đặt trong thư mục 6.
Viết các thành phần VueKhi sử dụng gói 9 để giàn giáo, một thành phần 0 Vue sẽ được đặt trong thư mục 1. Tệp 0 là một ví dụ về một thành phần VUE tệp duy nhất xác định mẫu JavaScript và HTML của nó trong cùng một tệp. Các thành phần tệp duy nhất cung cấp một cách tiếp cận rất thuận tiện để xây dựng các ứng dụng điều khiển JavaScript. Thành phần ví dụ được đăng ký trong tệp 5 của bạn: 4 Để sử dụng thành phần trong ứng dụng của bạn, bạn có thể thả nó vào một trong các mẫu HTML của bạn. Ví dụ: sau khi chạy lệnh 4 Artisan để mang lại xác thực và màn hình đăng ký ứng dụng của bạn, bạn có thể thả thành phần vào mẫu lưỡi 5: 5
Nếu bạn quan tâm đến việc tìm hiểu thêm về việc viết các thành phần Vue, bạn nên đọc tài liệu Vue, cung cấp một cái nhìn tổng quan kỹ lưỡng, dễ đọc về toàn bộ khung Vue. Sử dụng phản ứngNếu bạn thích sử dụng React để xây dựng ứng dụng JavaScript của mình, Laravel sẽ biến nó thành một bản cinch để trao đổi giàn giáo Vue với giàn giáo React: 6 Thêm cài đặt trướcCác cài đặt trước là "Macroable", cho phép bạn thêm các phương thức bổ sung vào lớp 8 khi chạy. Ví dụ: mã sau đây thêm một phương thức 9 vào lớp 8. Thông thường, bạn nên khai báo các macro đặt trước trong một nhà cung cấp dịch vụ: 7 Sau đó, bạn có thể gọi cài đặt trước mới thông qua lệnh 1: 8 Laravel 9 có đi kèm với bootstrap không?Gói Laravel/UI đi kèm với giàn giáo đăng nhập và đăng ký cho bố cục React, Vue, JQuery và Bootstrap..
Tôi có thể sử dụng bootstrap với laravel không?Giới thiệu.Mặc dù Laravel không ra lệnh cho các bộ xử lý trước JavaScript hoặc CSS mà bạn sử dụng, nhưng nó cung cấp một điểm bắt đầu cơ bản bằng cách sử dụng bootstrap, React và / hoặc Vue sẽ hữu ích cho nhiều ứng dụng.Theo mặc định, Laravel sử dụng NPM để cài đặt cả hai gói frontend này.it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.
Phiên bản nào của Bootstrap mà Laravel sử dụng?Laravel sử dụng Bootstrap 4 để bắt đầu.bootstrap 4 to start.
Làm thế nào để bạn auth trong laravel 9?Cài đặt gói nhà soạn nhạc Laravel/UI (1.0) và chạy php artisan ui vue --Auth trong một ứng dụng Laravel mới.Sau khi di chuyển cơ sở dữ liệu của bạn, điều hướng trình duyệt của bạn sang http: //your-app.test/register hoặc bất kỳ URL nào khác được gán cho ứng dụng của bạn.. After migrating your database, navigate your browser to http://your-app.test/register or any other URL that is assigned to your application. |
