Tôi không thể sử dụng
npm install
6 trong ứng dụng của mình. Mỗi khi máy chủ trả về lỗi sauNhận // localhost: 8000/css/app.css net :: err_aborted 404 [không tìm thấy].
Tôi sử dụng một trang Blade.
Tôi đã cố gắng sử dụng
npm install
7 và npm install
8 và gian hàng không hoạt động.
Mike Ross
2.8974 Huy hiệu vàng44 Huy hiệu bạc92 Huy hiệu Đồng4 gold badges44 silver badges92 bronze badges
Đã hỏi ngày 15 tháng 11 năm 2020 lúc 19:41Nov 15, 2020 at 19:41
6
Hãy thử điều này trước khi chạy dự án của bạn trên máy chủ, hãy đảm bảo biên dịch Laravel-Mix
npm install
Và sau đó chạy
npm run dev
bạn phải đối mặt với lỗi vì app.css chưa được biên dịch
Đã trả lời ngày 16 tháng 11 năm 2020 lúc 13:06Nov 16, 2020 at 13:06
Đảm bảo bạn biên dịch nhập CSS của mình đúng trong
npm install
9 trước. Nó sẽ trông giống như thế này:// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
Sau đó, chạy cái này trên thiết bị đầu cuối của bạn:
npm run dev
0. Điều này sẽ lần lượt, biên dịch npm install
6 của bạn trong npm run dev
2 của bạn. Nếu bạn đang thực hiện các định nghĩa CSS tùy chỉnh, tôi khuyên bạn nên sử dụng npm run dev
3 và đưa nó vào thư mục npm run dev
2 của bạn và xác định nó bên dưới npm install
6 của bạn, như:
Tài sản phải luôn nằm trong thư mục
npm run dev
6 để có thể nhìn thấy theo lệnh npm run dev
7.Đã trả lời ngày 16 tháng 11 năm 2020 lúc 3:34Nov 16, 2020 at 3:34
Sử dụng điều này đã làm việc 100%
Chạy lệnh này
npm i vue-loader
sau đó chạy
npm run dev
Bạn sẽ nhận được giải pháp của bạn.
Đã trả lời ngày 2 tháng 9 năm 2021 lúc 9:59Sep 2, 2021 at 9:59
Rakesh Kumar Oadrakesh Kumar OadRakesh kumar Oad
1.3021 Huy hiệu vàng15 Huy hiệu bạc24 Huy hiệu đồng1 gold badge15 silver badges24 bronze badges
Đây là bước để cài đặt:installing:
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
NPM chạy Dev
Nếu bạn gặp lỗi ở bước này, bạn có thể thử điều này:
npm run dev
8 hoặc npm run dev
9
Ethan
8267 Huy hiệu vàng17 Huy hiệu bạc31 Huy hiệu đồng7 gold badges17 silver badges31 bronze badges
Đã trả lời ngày 13 tháng 3 lúc 15:13Mar 13 at 15:13
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
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 khởi đầu cơ bản bằng cách sử dụng bootstrap và 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.
CSS
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.
Xóa giàn giáo phía trước
Nếu bạn muốn xóa giàn giáo phía trước khỏi ứng dụng của mình, bạn có thể sử dụng lệnh
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
0 Artisan. Lệnh này, khi kết hợp với tùy chọn // Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
1, sẽ xóa giàn giáo bootstrap và Vue khỏi ứng dụng của bạn, chỉ để lại một tệp SASS trống và một vài thư viện tiện ích JavaScript thông thường:php artisan preset none
Viết CSS
Tệp
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
2 của Laravel bao gồm gói // Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
3 để 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 // Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
2 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
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
5, 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
0 sẽ xử lý các hướng dẫn trong tệp // Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
7 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
2:npm install
0// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
7 mặc định được bao gồm với Laravel sẽ biên dịch tệp SASS
0. Tệp
1 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
1 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 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
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
2 trong thư mục gốc của dự án. Tệp này tương tự như tệp
4 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
2 bao gồm một vài gói như// Fonts @import url['//fonts.googleapis.com/css?family=Nunito']; // Bootstrap @import 'bootstrap'; // Font Awesome @import '@fortawesome/fontawesome-free';
6 và
7 để 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
2 khi cần thiết cho ứng dụng của riêng bạn.// Fonts @import url['//fonts.googleapis.com/css?family=Nunito']; // Bootstrap @import 'bootstrap'; // Font Awesome @import '@fortawesome/fontawesome-free';
Khi các gói được cài đặt, bạn có thể sử dụng lệnh
npm run dev
0 để biên dịch tài sản của bạn. 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 run dev
0, webpack sẽ thực thi các hướng dẫn trong tệp // Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
7 của bạn:npm install
0Theo mặc định, tệp Laravel
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
7 biên soạn SASS của bạn và tệp npm i vue-loader
3. Trong tệp npm i vue-loader
4, 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 npm i vue-loader
5.{Tip} Tệp
4 sẽ tải tệpnpm i vue-loader
7 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.npm i vue-loader
Viết các thành phần Vue
Theo mặc định, các ứng dụng Laravel mới chứa thành phần VUE
npm i vue-loader
8 nằm trong thư mục npm i vue-loader
9. Tệp npm i vue-loader
8 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 npm i vue-loader
4 của bạn:npm install
3Để 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
npm run dev
2 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 npm run dev
3:npm install
4{tip} Hãy nhớ rằng, bạn nên chạy lệnh
0 mỗi khi bạn thay đổi thành phần Vue. Hoặc, bạn có thể chạy lệnhnpm run dev
5 để 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.npm run dev
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. Trên bất kỳ ứng dụng Laravel mới nào, bạn có thể sử dụng lệnh
// Fonts
@import url['//fonts.googleapis.com/css?family=Nunito'];
// Bootstrap
@import 'bootstrap';
// Font Awesome
@import '@fortawesome/fontawesome-free';
0 với tùy chọn npm run dev
7:npm install
5Lệnh đơn này sẽ loại bỏ giàn giáo Vue và thay thế nó bằng giàn giáo React, bao gồm một thành phần ví dụ.