Hướng dẫn laravel bootstrap --auth css not working - laravel bootstrap --auth css không hoạt động

Question

Tôi phải đối mặt với cùng một vấn đề trong khi thực hiện

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

6 trong Laravel phiên bản 7 nhưng tôi đã sửa nó bằng cách làm theo các bước dưới đây.

Nội dung chính Show

Giàn giáo JavaScript & CSS
Giới thiệu
Viết JavaScript
Viết các thành phần Vue
Sử dụng phản ứng
Thêm cài đặt trước
Tại sao CSS của tôi không hoạt động ở Laravel?
Tôi đặt các tệp CSS ở đâu trong Laravel?
Laravel có bootstrap không?
Làm thế nào để bạn auth trong laravel 9?

Ngày thứ nhất :

Tải xuống NodeJSnodejs
Cài đặt NodeJS trong PC của bạnnodejs in your pc

Thứ hai: Chạy lệnh này

composer require laravel/ui

Khi gói

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

7 đã được cài đặt, bạn có thể cài đặt giàn giáo phía trước bằng lệnh UI Artisan:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Để tạo thư mục

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

8 bên trong dự án của bạn, hãy chạy lệnh bên dưới

npm install

Khi các phụ thuộc đã được cài đặt bằng cách sử dụng cài đặt NPM, 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 NPM Run Dev sẽ xử lý các hướng dẫn trong tệp webpack.mix.js 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 công cộng/CSS:

npm run dev

Một thời gian bạn có thể cần chạy lệnh này

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

9 hoặc

npm install

0 để sửa một số gói nếu chúng cần phải có.

Có thể một thời gian bằng cách chạy lệnh này

npm install

1 hoặc

npm install

2 Nó sẽ cho bạn thấy một lỗi như bên dưới.

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

Jus chạy

npm install

2 một lần nữa, nó sẽ bắt đầu ____24 sau khi thành công, bản dựng cũng sẽ thành công.

Phiên bản

Cảnh báo bạn đang duyệt tài liệu cho một phiên bản cũ của Laravel. Xem xét nâng cấp dự án của bạn lên Laravel 9.x. You're browsing the documentation for an old version of Laravel. Consider upgrading your project to Laravel 9.x.

Giàn giáo JavaScript & CSS

Giới thiệu
Viết CSS
Viết JavaScript
- Viết các thành phần Vue
- Sử dụng phản ứng
Thêm cài đặt trước

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.

Làm thế nào để bạn auth trong laravel 9?

composer require laravel/ui:^1.0 --dev

Laravel 9 Ví dụ đăng nhập và đăng ký tùy chỉnh.

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...



php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Bước 1: Tạo ứng dụng Laravel ..

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

JavaScript

Laravel 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 CSS

Sau khi cài đặt gói nhà soạn nhạc

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

7 và tạo giàn giáo phía trước, tệp

npm install

9 của Laravel sẽ bao gồm gói

npm run dev

0 để 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

npm install

9 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):

npm install

Khi các phụ thuộc đã được cài đặt bằng

npm run dev

2, 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

npm install

1 sẽ xử lý các hướng dẫn trong tệp

npm run dev

4 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

npm run dev

5:

npm run dev

Tệp

npm run dev

4 được bao gồm trong giàn giáo phía trước của Laravel sẽ biên dịch tệp SASS

npm run dev

7. Tệp

npm run dev

8 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

npm run dev

8 tuy nhiên bạn muốn hoặc thậm chí sử dụng bộ xử lý trước hoàn toàn khác bằng cách định cấu hình Laravel Mix.

Viết JavaScript

Tấ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

npm install

9 trong thư mục gốc của dự án. Tệp này tương tự như tệp

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

1 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):

npm install

{Tip} Theo mặc định, tệp Laravel

npm install

9 bao gồm một vài gói như

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

3 và

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

4 để giúp bạn bắt đầu xây dựng ứng dụng JavaScript của mình. Vui lòng thêm hoặc xóa khỏi tệp

npm install

9 khi cần thiết cho ứng dụng của riêng bạn.

Khi các gói được cài đặt, bạn có thể sử dụng lệnh

npm install

1 để 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

npm install

1, webpack sẽ thực thi các hướng dẫn trong tệp

npm run dev

4 của bạn:

npm run dev

Theo mặc định, tệp Laravel

npm run dev

4 biên dịch tệp SAS của bạn và tệp

composer require laravel/ui:^1.0 --dev

0. Trong tệp

composer require laravel/ui:^1.0 --dev

1, 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

composer require laravel/ui:^1.0 --dev

2.

{Tip} Tệp
composer require laravel/ui:^1.0 --dev
1 sẽ tải tệp
composer require laravel/ui:^1.0 --dev
4 bootstraps và định cấu hình Vue, Axios, JQuery và tất cả các phụ thuộc JavaScript khác. Nếu bạn có thêm phụ thuộc JavaScript để định cấu hình, bạn có thể làm như vậy trong tệp này.

Viết các thành phần Vue

Khi sử dụng gói

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

7 để giàn giáo, một thành phần

composer require laravel/ui:^1.0 --dev

6 Vue sẽ được đặt trong thư mục

composer require laravel/ui:^1.0 --dev

7. Tệp

composer require laravel/ui:^1.0 --dev

6 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

composer require laravel/ui:^1.0 --dev

1 của bạn:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

1

Để 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

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

0 Artisan để mang tính xác thực và màn hình đăng ký của ứng dụng của bạn, bạn có thể thả thành phần vào mẫu lưỡi

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

1:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

2

{Tip} Hãy nhớ rằng, bạn nên chạy lệnh
npm install
1 mỗi khi bạn thay đổi thành phần Vue. Hoặc, bạn có thể chạy lệnh
npm install
2 để giám sát và tự động biên dịch lại các thành phần của bạn mỗi khi chúng được sửa đổi.

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 ứng

Nế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:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

3

Thêm cài đặt trước

Cá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

// Generate basic scaffolding...
php artisan ui bootstrap



php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

4 khi chạy. Ví dụ: mã sau đây thêm một phương thức

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

5 vào lớp

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

4. 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ụ:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

4

Sau đó, bạn có thể gọi cài đặt trước mới thông qua lệnh

npm install

7:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

5

Tại sao CSS của tôi không hoạt động ở Laravel?

Hãy thử sử dụng Mix để sao chép các tài sản từ /nhà cung cấp Dirs vào các dirs /công khai của bạn (tức là /công khai /CSS và /public /js).Sau đó sử dụng các đường dẫn đó cho tài sản của bạn trong HTML.Đừng nghĩ rằng bạn nên tải tài sản từ nhà cung cấp. (ie /public/css and /public/js). Then use those paths for your assets in the html. Don't think you should be loading assets from the vendor dir.

Tôi đặt các tệp CSS ở đâu trong Laravel?

lưỡi.Tệp PHP ở bên thư mục trang và tệp CSS nằm trong thư mục công khai/CSS.public/css folder.

Laravel có bootstrap không?

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.

Làm thế nào để bạn auth trong laravel 9?

Laravel 9 Ví dụ đăng nhập và đăng ký tùy chỉnh..

Bước 1: Tạo ứng dụng Laravel ..

Bước 2: Kết nối với cơ sở dữ liệu ..

Bước 3: Thiết lập bộ điều khiển auth ..

Bước 4: Tạo các tuyến đường Auth ..

Bước 5: Tạo tệp Chế độ xem Blade Auth ..

Bước 6: Chạy máy chủ phát triển Laravel ..

programming css Laravel 9 Bootstrap Composer require laravel/ui Laravel/ui auth Auth Laravel 6

Hướng dẫn laravel bootstrap --auth css not working - laravel bootstrap --auth css không hoạt động

Giàn giáo JavaScript & CSS

Giới thiệu

Bước 1: Tạo ứng dụng Laravel ..

JavaScript

Viết CSS

Viết JavaScript

Viết các thành phần Vue

Sử dụng phản ứng

Thêm cài đặt trước

Tại sao CSS của tôi không hoạt động ở Laravel?

Tôi đặt các tệp CSS ở đâu trong Laravel?

Laravel có bootstrap không?

Làm thế nào để bạn auth trong laravel 9?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội